vue视频播放组件,vue-video-player文档

　　本文主要介绍了适用于Vue的播放器组件Vue-Video-Player的操作，具有很好的参考价值。希望对你有帮助。来和边肖一起看看吧。

　　如果h5的标签Video不能满足你的需求，那么使用这个组件Vue-Video-Player，它可能会满足你的需求。

　　视频播放器

　　视频播放器vjs-自定义皮肤

　　ref=视频播放器

　　:playsinline=true

　　:options=playerOptions

　　/视频播放器

　　配置参数：

　　玩家选项：{

　　身高：400，

　　播放速率：[0.7，1.0，1.5，2.0]，//播放速度

　　Autoplay: false，//如果为true，浏览器准备好了就开始播放。

　　Muted: false，//默认情况下将消除任何音频。

　　Loop: false，//使视频一结束就重新开始。

　　Preload: auto ，//建议浏览器是否应在视频加载元素后开始下载视频数据。自动浏览器选择最佳行为并立即开始加载视频(如果浏览器支持)。

　　语言： zh-CN ，

　　AspectRatio: 16:9 ，//将播放器置于平滑模式，并在计算播放器的动态大小时使用该值。该值应该代表一个比例，即由冒号分隔的两个数字(例如“16:9”或“4:3”)

　　Fluid: true，//为true时，Video.js player将具有流体大小。换句话说，它将被缩放以适合其容器。

　　来源：[

　　{

　　类型： video/mp4 ，//这里支持的种类很多：基本视频格式，直播，流媒体等。详情请参考git URL项目。

　　src:require( @/assets/vedio . MP4 )//URL地址

　　}

　　],

　　Poster:要求( @/assets/poster.png )，//您的封面地址

　　//width:document . documentelement . client width，//播放器宽度

　　NotSupportedMessage:该视频暂时无法播放，请稍后再试，//允许覆盖Video.js无法播放媒体源时显示的默认信息。

　　控制栏：{

　　时间分割器：真的，

　　durationDisplay: true，

　　remainingTimeDisplay: false，

　　屏幕切换：true//全屏按钮

　　}

　　},

　　请自行参考，并附上链接。

　　https://www.npmjs.com/package/vue-video-player

　　补充知识：vue 关于在安卓低版本下空白页

　　我上网搜了很多原因，都没有解决。我猜测代码的哪一部分不兼容。最后，我在代码上做了注释，一步步检查原因。

　　后来发现是斯皮尔的锅。我们用的是高配版5.3.6的版本，应该是Android的低配版不兼容Swiper R5的es6或者es7高级语法。

　　回到3.4.2版本，成功解决。

　　总结：

　　以后要注意各种插件版本的兼容性。

　　Vue的播放器组件Vue-Video-Player的上述操作是边肖分享的所有内容。希望能给你一个参考，多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。