rideo选中 vue-ag凯发k8国际
如果h5的标签不能满足你的需求,那就用这个组件vue-video-player吧,也许可以覆盖到你的需求。
class="video-player vjs-custom-skin"
ref="videoplayer"
:playsinline="true"
:options="playeroptions"
>
配置参数:
playeroptions: {
height: 400,
playbackrates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: "auto", // 建议浏览器在加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
language: "zh-cn",
aspectratio: "16:9", // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [
{
type: "video/mp4", // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
src: require("@/assets/vedio.mp4") // url地址
}
],
poster: require("@/assets/poster.png"), // 你的封面地址
// width: document.documentelement.clientwidth, //播放器宽度
notsupportedmessage: "此视频暂无法播放,请稍后再试", // 允许覆盖video.js无法播放媒体源时显示的默认信息。
controlbar: {
timedivider: true,
durationdisplay: true,
remainingtimedisplay: false,
fullscreentoggle: true // 全屏按钮
}
},
具体使用自行查阅,附上链接
补充知识:vue 关于在安卓低版本下空白页
上网搜索了好些原因都没解决,猜测是哪部分代码不兼容,最后注释代码一步步排查原因
然后发现是swiper的锅,我们用的高版本5.3.6的版本,应该是安卓低版本不兼容swiper5的es6或es7高级语法
后面回退到3.4.2版本,成功解决
总结:
以后要注意各种插件版本的兼容性
以上这篇适用于 vue 的播放器组件vue-video-player操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
总结
以上是ag凯发k8国际为你收集整理的rideo选中 vue_适用于 vue 的播放器组件vue-video-player操作的全部内容,希望文章能够帮你解决所遇到的问题。
- 上一篇:
- 下一篇: