video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题
一、问题描述:
在h5做根据视频源直播功能时,在浏览器能打开视频,但是在部分安卓机和苹果机在微信浏览器打开会出现黑屏的状况(默认打开页面播放视频)
二、本人发生的原因:打开页面默认加载视频,由于关闭了控件,导致部分手机视频无法加载;需要手动加个触发按钮
三、解决
(1)、引入相关js和css:videojs-contrib-hls.js 、video.js、 video-js.css(自行下载)
(2)、上代码
<video
id="example-video"
class="video-js vjs-big-play-centered"
autoplay="autoplay"
controlsList="nofullscreen nodownload"
disablePictureInPicture oncontextmenu="return false"
style="width: 100%;height: 15rem;"
x-webkit-airplay="allow"
>
<source :src="liveSource" type="application/vnd.apple.mpegurl">
</video>
var myPlayer = videojs('example-video', {
bigPlayButton: true, //是否显示播放按钮
autoplay:true,//自动播放
controls: true,//播放控件
}, function () {
this.play()
})