video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题

本文介绍了如何解决使用video.js在微信浏览器中播放.m3u8视频源时出现黑屏的问题。问题源于默认关闭控件导致部分设备无法加载。解决方案包括引入videojs-contrib-hls.js、video.js和video-js.css,以及设置正确的视频标签属性和video.js配置,确保播放按钮显示并自动播放。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

在这里插入图片描述
在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值