video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题
一、问题描述:
在h5做根据视频源直播功能时,在浏览器能打开视频,但是在部分安卓机和苹果机在微信浏览器打开会出现黑屏的状况(默认打开页面播放视频)
二、本人发生的原因:打开页面默认加载视频,由于关闭了控件,导致部分手机视频无法加载;需要手动加个触发按钮
三、解决
(1)、引入相关js和css:videojs-contrib-hls.js 、video.js、 video-js.css(自行下载)
(2)、上代码
复制代码
1
2
3
4
5
6
7
8
9
10
11
12<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>
复制代码
1
2
3
4
5
6
7
8var myPlayer = videojs('example-video', { bigPlayButton: true, //是否显示播放按钮 autoplay:true,//自动播放 controls: true,//播放控件 }, function () { this.play() })
最后
以上就是天真蜜粉最近收集整理的关于video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题的全部内容,更多相关video内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复