video.js兼容微信浏览器，（播放.m3u8视频源）解决微信浏览器黑屏问题

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()
		})

最后

以上就是天真蜜粉为你收集整理的video.js兼容微信浏览器，（播放.m3u8视频源）解决微信浏览器黑屏问题的全部内容，希望文章能够帮你解决video.js兼容微信浏览器，（播放.m3u8视频源）解决微信浏览器黑屏问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。