vue-video-player文档,vue h5页面
主要介绍了在vue中使用h5video标签在弹出窗口中播放本地视频的方法。文中详细介绍了示例代码，对大家的学习或工作有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。
:
目录
1.打开和关闭弹出窗口2。介绍本地视频资源路径3。视频播放后自动关闭弹出窗口。弹出窗口中视频的自适应大小参考h5视频标签的使用。
在开发过程中，需要注意以下几点。
1.弹窗的打开关闭
使用。父组件中的同步绑定可见属性可以直接关闭子组件中的弹出窗口来更新父组件传入的可见值；
//子组件在父组件中被引用
video-modal:visible . sync= show video modal
//在子组件中
El-dialog:visible= visible @ close= close modal
//子装配中关闭弹出窗口的方法
closeModal() {
这个。$emit(updata:visible ，false)；
}
但这种使用会导致视频弹出窗口的进度条每次重新打开时都停留在最后打开的位置，所以需要在引用子组件外嵌套一个div，并使其在v-if每次打开时重新渲染，这样就解决了进度条缓存的问题；
div v-if=showVideoModal
video-modal:visible . sync= show video modal
/div
2. 本地视频资源路径的引入
要播放的视频是项目中的静态资源。由于弹出组件需要支持复用性，视频路径不能写死。下面的例子是视频名称定制；
录像
ref=video
播放视频
controls=controls
自动播放=自动播放
source:src= require( @/assets/videos/ video name . MP4 ) type= video/MP4 /
/视频
如果视频不在src目录，而是在public目录，写法略有不同；
计算值：{
src() {
//需要用计算属性在js段定义
返回process . env . base _ URL videos/ this . video name . MP4 ；
}
},
3. 视频播放完毕自动关闭弹窗
只需监听视频标签的结束事件，关闭弹出窗口。这个。vue生命周期的定义中需要添加$nextTick，否则无法获取对应的dom元素；
已安装(){
这个。$nextTick(()={
//播放后自动关闭弹出窗口。
const ele video=document . query selector(。play-video’)；
ele video . addevent listener( ended ，()={
this . closevideomodal()；
}，假)；
});
},
4. 视频在弹窗中自适应大小
设置视频标签的适当宽度和高度，并使用object-fit:contain；属性。
最后附上完整的代码。
模板
El-dialog class= video-dialog :visible= visible :title= title width= 75% append-to-body @ close= closeVideoModal
录像
ref=video
播放视频
controls=controls
自动播放=自动播放
来源：src=src type=video/mp4 /
/视频
/el-dialog
/模板
脚本
导出默认值{
名称：视频模型，
道具：{
可见：{
类型：布尔型，
默认值：false
},
//父组件参数弹出窗口标题
标题：{
类型：字符串，
默认值：“”
},
//父组件传递要播放的视频的名称。
视频名称：{
类型：字符串，
默认值：“”
}
},
计算值：{
src() {
返回process . env . base _ URL videos/ this . video name . MP4 ；
}
},
已安装(){
这个。$nextTick(()={
//播放后自动关闭弹出窗口。
const ele video=document . query selector(。play-video’)；
ele video . addevent listener( ended ，()={
this . closevideomodal()；
}，假)；
});
},
方法：{
closeVideoModal() {
这个。$emit(update:visible ，false)；
}
}
};
/脚本
style lang=scss 范围。播放视频{
对象适合：包含；
宽度：100%；
身高：99.5%；
}
/风格
关于如何在vue中使用h5视频标签播放本地视频的文章到此结束。关于通过vue弹出播放本地视频的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。