vue中使用h5|vue中使用h5 video标签实现弹窗播放本地视频的方法
目录
- 1.弹窗的打开关闭
- 2. 本地视频资源路径的引入
- 3. 视频播放完毕自动关闭弹窗
- 4. 视频在弹窗中自适应大小
参考h5 < video >标签的用法在开发过程中主要涉及到以下几个需要关注的点
1.弹窗的打开关闭 父组件中使用.sync绑定visible属性，可直接在子组件中关闭弹窗更新父组件传入的visible值；
// 父组件中引用子组件// 子组件中
// 子组件中关闭弹窗方法closeModal() {this.$emit("updata:visible", false); }
不过这样使用会导致每次重新打开视频弹窗进度条都会留在上一次打开的位置，所以需要在引用子组件外再嵌套一个div，利用v-if使其每次打开都重新渲染，从而解决进度条缓存的问题；
【vue中使用h5|vue中使用h5 video标签实现弹窗播放本地视频的方法】
2. 本地视频资源路径的引入 需要播放的视频是项目中的静态资源，由于弹窗组件需要支持可复用，所以视频路径不可写死，下面示例为视频名称自定义；
如果视频不在src目录下，而是public目录下则写法略有不同；
computed: {src() {// 需要在js部分用计算属性定义return process.env.BASE_URL + "videos/" + this.videoName + ".mp4"; }},
3. 视频播放完毕自动关闭弹窗 监听video标签的ended事件并关闭弹窗即可，vue生命周期中定义需要增加this.$nextTick，否则无法获取对应的dom元素；
mounted() {this.$nextTick(() => {// 播放完毕自动关闭弹窗const eleVideo = document.querySelector(".play-video"); eleVideo.addEventListener("ended", () => {this.closeVideoModal(); }, false); }); },
4. 视频在弹窗中自适应大小 给video标签设置合适的宽高，在利用object-fit: contain; 属性即可。
最后附上完整代码
.play-video {object-fit: contain; width: 100%; height: 99.5%; }
到此这篇关于vue中使用h5 video标签实现弹窗播放本地视频的方法的文章就介绍到这了,更多相关vue 弹窗播放本地视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
推荐阅读
- Windows 10如何修复文件正在使用错误（4种简单解决方法）
- 如何修复请求的资源正在使用的问题（解决办法教程）
- 如何修复Windows 10电脑上无法使用外部扬声器（解决办法）
- 如何在Windows 10中解决鼠标问题（最佳的7种方法）
- Android中实现OkHttp上传文件到服务器并带进度
- Vue3|Vue3 使用 Hook 实现数据懒加载
- app流畅度测试--使用FPS Meter
- app流畅度测试--使用手机自带功能
- Appium基础一（Appium概念）
- app流畅度测试--使用SM