在调试的过程中,发现电脑端,手机端在谷歌中打开是没有问题的。但是在微信里打开页面出现问题。
分析:微信自带的内嵌浏览器是X5内核,而谷歌的内核是Webkit,video在X5内核里有兼容性的问题。
通过https://juejin.cn/post/6844903825002725383#heading-3博客发现可以解决ios的兼容性问题:
document.addEventListener(
"WeixinJSBridgeReady",
() => {
this.video.play();
},
false
); // 兼容微信自动播放
但是android的还是不兼容。经过不断尝试和发现,找到了一个比较好的框架video.js插件:
参考文章:https://juejin.cn/post/6844903975766982663
解决办法:
备注:微信自带的浏览器内核是x5,由于自带的安全机制,不能让其自动播放,所以必须要加上底部控制栏,用来控制它的播放和暂停。
1.安装
npm install --save video.js
2.main.js中引入
import Video from "video.js";
import "video.js/dist/video-js.min.css"
Vue.prototype.$video = Video
3.在组件中使用。在video标签里的class里加入vjs-big-play-centered可以使播放按钮居中显示。
<template>
<div class="video_box">
<video ref="videoPlayer" class="video-js" poster="../../../assets/logo.png">
<source
src="../../../../public/static/video/test1.mp4"
type="video/mp4"
/>
</video>
</div>
</template>
<script>
export default {
name: "VideoPlayer",
data() {
return {
player: null
};
},
mounted() {
// 播放参数
let options = {
controls: true, // 是否显示底部控制栏
preload: "auto", // 加载<video>标签后是否加载视频
autoplay: "muted", // 静音播放
// playbackRates: [0.5, 1, 1.5, 2],// 倍速播放
//width: "640",
//height: "247",
controlBar: {
// 自定义按钮的位置
children: [
{
name: "playToggle"
},
{
name: "progressControl"
},
{
name: "currentTimeDisplay"
},
{
name: "timeDivider"
},
{
name: "durationDisplay"
},
{
name: "volumePanel", // 音量调整方式横线条变为竖线条
inline: false
},
// {
// name: "pictureInPictureToggle" //画中画播放模式
// },
{
name: "fullscreenToggle"
}
]
}
};
this.player = this.$video(this.$refs.videoPlayer, options,function onPlayerReady() {
console.log('onPlayerReady', this);
});
},
beforeDestroy() {
if (this.player) {
this.player.dispose()
}
},
methods: {
}
};
</script>
<style scoped>
.video_box {
margin: 10px;
width: 99%;
height: 450px;
}
.video-js {
width: 100%;
height: 450px;
}
</style>