草庐IT

前端video-player

全部标签

前端使用intro.js实现页面操作引导

前言Intro.js的官方文档:https://introjs.com/docs/getting-started/install 利用Intro.js实现简单的新手引导 效果:下载依赖配置打开官网Intro.jsDocumentation|Intro.jsDocs(introjs.com)可以看到官网的下载依赖npminstallintro.js--save和yarnaddintro.js当然也可以下载到本地引入使用intro.js-Libraries-cdnjs-The#1freeandopensourceCDNbuilttomakelifeeasierfordevelopers打开连接引入

前端面试集锦(DOM HTTP 框架(Vue))

DOM事件委托参考答案:简易版(有缺陷没有考虑子元素):bug在于,如果用户点击的是li里面的span,就没法触发fn,这显然不对ul.addEventListener(‘click’,function(e){if(e.target.tagName.toLowerCase()===‘li’){fn()//执行某个函数//console.log(‘您点击了li’)}})。高级版:思路是点击span后,递归遍历span的祖先元素看其中有没有ul里面的li。functiondelegate(element,eventType,selector,fn){element.addEventListener

【wx-open-launch-app】微信内置浏览器网页唤起app操作和一些坑,偏前端使用开放标签方面

最近实现了一下微信H5(Android)唤起app功能,使用的是微信开放标签,wx-open-launch-app,使用这个标签后,我们就可以在微信浏览器中唤起对应的app了官方使用教程:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html使用教程需要一个已验证的微信服务号账号和微信开放平台账号,两个账号需要相互绑定,然后在开放平台服务号设置网页跳转移动应用关联引入对应的js文件、通过wx.config获取到对应的标签权限使用标签//在vue中,如果配置好对应的公众号和开放平台,下面的

作为前端leader,如何搭建属于我们公司自己的流水线自动化部署系统(node+express)

背景:自动化部署系统主要可以集成到公司内部的管理系统中去,比如公司有多个项目,移动端H5,大屏网站,门户网站等...每次发布或者迭代都需要前端同事打包然后在交给运维或者后端同事放到服务器上进行部署,如果有一个项目多个同事合作完成还要走git合并流程,所以我们的目标就是不让前端进行打包,开发完成代码后直接提交就行,通过点击管理后台的某个按钮触发某个平台的前端项目自动更新,同时也不需要在交付给运维或者后端,便携式与流程管理,实现自动化部署(这里只说自己实现的,当然你们也可以去接入腾讯或阿里的自动化流水部署系统,但是某些环境下只能使用自己的如何去实现) 这里做一个简单的版本和实现代码,可以自己扩展回

前端-vue+elment-ui之表格自定义列模版

表格自定义列模版文章目录表格自定义列模版前言一、为什么要自定义表列模版?二、实现步骤1.封装表格组件2.父组件引用总结前言日前vue3项目中用elment-ui表格封装一个组件,有自定义表列格式的需求,做完后顺手总结一下一、为什么要自定义表列模版?后端返回的数据往往比较原始,比如状态是数值,而我们要给它转成中文并用不同颜色标记,这种场景很常见二、实现步骤1.封装表格组件代码如下(示例):通过插槽v-slots实现//data-table/index.tsximport{ElPagination,ElTable,ElTableColumn}from"element-plus";import{Pr

热血前端勇闯自动化测试 Playwright + TypeScript 如何debug以及如何使用Cookie

文章目录前言一、如何在运行中debug呢?二、如何使用上下文的Cookie如何下载Playwright以及使用VScode插件运行测试用例前言问:前端做好好的为什么要来卷测试呢?答:因为所有主线流程测试可能不会完全兼顾得到,所以为了能更(yu)好(kuai)的工(mo)作(yu),所以内心就产生了一个邪恶的想法😈假如我提测前把所有的主流程跑一边呢?so请看下文(默认已经安装和了解Playwright了)提示:以下是本篇文章正文内容,系好安全带准备发车!一、如何在运行中debug呢?找到我们下载的PlayWright插件(如何下载请上滑开始部分)(1.点击你想要debug的代码块左侧,会出现小红

[HTML]Web前端开发技术20(HTML5、CSS3、JavaScript )HTML5 基础与CSS3 应用,datetime-local,required,MPEG4——喵喵画网页

希望你开心,希望你健康,希望你幸福,希望你点赞!最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!!喵喵喵,你对我真的很重要!目录前言HTML5新增的表单属性HTML5新增的input类型HTML5表单新增输入类型HTML5视频与音频CSS3基础应用CSS3浏览器兼容性课后练习网页标题:顺序结构的应用网页标题:if..else语句的应用网页标题:switch结构的应用网页标题:顺序结构的应用总结前言回来啦!HTML5新增的表单属性required属性。required属性规定必须在提交之前填写输入域(不能为空)。min、max和step属性。min、max和step属性用于为包

Vue中使用Video标签播放 <解析后的短视频>去水印视频无响应

📣文章目录问题:情景复现:链接在Video标签打不开链接浏览器正常打开出现的原理解决方式前端解决全局添加标签Vue单页面添加标签完美解决:问题:发送Ajax请求,请求后端接口解析抖音无水印视频并且展示在页面中,后端已经可以把解析后的访问地址返回,通过浏览器访问该地址也是没有问题的,接着我通过Vue的绑点video的src,预期状态应该是可以被播放的,实际上点击也没反应,查看页面代码也发现video的src已经设置了正确的视频url情景复现:前端发送请求到后端接口我们前端打印获取后端解析后的对象信息链接在Video标签打不开我们在查看元素标签可以看出src已经被替换成了正确的播放地址,那为什么视

这是我见过最牛逼的滑动加载前端框架

文章目录前言一、mescroll简介二、快速开始三、一分钟入门mescroll图片懒加载四、mescroll在vue中的使用五、小结前言在手机端实现下拉刷新和下拉加载是最常见不过的需求了。今天大师兄就给大家分享一个非常精致的js框架:mescroll.提示:以下是本篇文章正文内容,下面案例可供参考一、mescroll简介mescroll.js是在H5端运行的下拉刷新和上拉加载插件。1.4.1以上版本,还能配置图片懒加载效果。mescroll.js是原生Javascript开发的,不依赖jquery,zepto等,还支持vue。二、快速开始下载并引用mescroll.min.css,mescro

前端-移动端-UI一致性-解决方案-美团技术团队

1.背景1.1行业现状与问题很多技术同学都知道,移动端往往比较侧重业务开发,这会导致人员规模不断扩大,项目复杂度也会持续增长。而为了满足业务的快速上线,很难去落实统一的设计规范,在开发过程中由于UI缺乏标准导致的问题不断凸显,具体体现在以下4个层面:设计层面:由于UI缺乏标准化设计规范,在不同App及不同开发语言平台上设计风格不统一,用户体验不一致;设计资源与代码均缺乏统一管理手段,无法实现积累沉淀,无法适应新业务的开发需求。开发层面:组件代码实现碎片化,存在多次开发的情况,质量难以保证;各端代码API不统一,维护拓展成本较高,变更主题、适配DarkMode等需求难以实现。测试层面:重复走查,