我是靠谱客的博主 天真蜜粉,这篇文章主要介绍video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题,现在分享给大家,希望可以做个参考。

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
8
var myPlayer = videojs('example-video', { bigPlayButton: true, //是否显示播放按钮 autoplay:true,//自动播放 controls: true,//播放控件 }, function () { this.play() })

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

最后

以上就是天真蜜粉最近收集整理的关于video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题的全部内容,更多相关video内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(87)

评论列表共有 0 条评论

立即
投稿
返回
顶部