关于uniapp引入webview使用video.js播放hls（m3u8）格式的直播时全屏返回卡死的问题

一、使用uniapp的原生video组件播放hls直播的问题

使用uniapp自带的video组件倒是可以正常播放hls（m3u8后缀）格式的直播。倒是反馈不是很好，具体问题是加载速度慢，等上半分钟到1分钟才能出现直播画面。

二、尝试在app页面中使用webView，h5的video.js插件进行播放

这里遇到了一个问题，就是在直播全屏的时候返回会直接卡死，不会退出全屏，原因未知。最后很麻烦，用了uniapp和webview的通讯，最后解决了问题。

1.uniapp页面

<web-view ref="webView" class="webView" :src="videoWebView"
 style="height: 500px;" @message="reciveMessage"></web-view>

//返回时判断是否全屏 如果是全屏则执行webview中的方法退出全屏 如果不是则正常返回
onBackPress() {
	if(this.isFull=='0'){
		 this.cancelFull()
		 return true
	 }
 },
onLoad(e) {
//接口返回的直播地址带到webview的参数中。
	this.videoWebView = 'xxxxxxxxx.html?data='+e
},

methods:{
	//定义方法用于调用webview中的函数，作用为退出全屏
	cancelFull(){
		var currentWebview = this.$scope.$getAppWebview()
        var wv = currentWebview.children()[0]
        wv.evalJS("cancelFull("+123+")");
	},
	//webview发送过来的数据，内容为是否全屏的判断
	reciveMessage(e){
		this.isFull = e.detail.data[0].action;
	},
}

2.使用video.js播放直播的webview页面

// 这里是uni 的 SDK 能在webview中使用一些uniapp的方法。要通讯的话就要引入
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
// video播放器的box
<div id="videoBox" style="width: 100%;">
    <img src="./loading.gif" alt="" style="width: 100%;height: 30vh;">
    <div style="text-align: center;font-size: 40px;color: #666;">视频加载中,请稍候...</div>
</div>
//引入了video.js
<link href="./video.min.css" rel="stylesheet">
<script src="./video.min.js"></script>


<script>
   window.onload = function () {
   	//这里用location.search获取了地址，从中提取传过来的参数（直播地址）
   	//处理方式因数据结构而异
        let obj = location.search; 
        let videoArr = obj.split('=')[1].split(',')
        let s = '';
        //可能多个视频，所以加了循环
        for (let i = 0; i < videoArr.length; i++) {
            // loveStr += '<div>' + videoArr[i] + '</div>';
            s += '<video class="video-js" autoplay controls data-setup="{}" style="width: 100%;margin-bottom:100px" height="500"><source src="'
            s += videoArr[i]
            s += '"></source></video>'
        };
        //将处理好的html代码放到box中，地址无问题即可正常播放
        document.getElementById('videoBox').innerHTML = s;
        let isFull = '';
        document.addEventListener("fullscreenchange", function(e) {
        	//监听了全屏变化的事件
            if (document.fullscreenElement) {
                isFull =  0
            } else {
                isFull =  1
            }
            //将是否全屏传到uniapp中
            uni.postMessage({
                data: {
                    action: isFull
                }
            });
        });
        
    }
    //定义了一个方法用于退出全屏（uniapp中全屏返回时调用了）
    function cancelFull() {
        document.webkitCancelFullScreen();
    };
</script>

3.使用ckplayer播放器

除了video.js，也试了ckplayer播放器播放，效果还行，而且没有全屏返回时卡死的问题。（使用时需将下载的ckplayer文件夹放到服务器中）

// ckplayer -->
<script type="text/javascript" src="ckplayer/ckplayer.js" charset="utf-8" data-name="ckplayer"></script>
<div id="videoBox" style="width: 100%;">
    <img src="./loading.gif" alt="" style="width: 100%;height: 30vh;">
    <div style="text-align: center;font-size: 40px;color: #666;">视频加载中,请稍候...</div>   
</div> 

 <script type="text/javascript">
 	//同上，处理参数传过来的的直播数据
    let obj=location.search; 
    let videoArr = obj.split('=')[1].split(',')
    let s = '';
    for (let i = 0; i < videoArr.length; i++) {
        s+='<div class="video'+i+'" style="width: 100%;height: 500px;margin-bottom:100px"></div>'
    };
    document.getElementById('videoBox').innerHTML = s;
    
    //定义一个变量：videoObject，用来做为视频初始化配置
    //可能有多个视频的循环
    for (let i = 0; i < videoArr.length; i++) {
        var videoObject = {
            container: '.video'+i, //“#”代表容器的ID，“.”或“”代表容器的class
            variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象
            video: videoArr[i], //视频地址
            live:true,
            autoplay:true
        };
        var player = new ckplayer(videoObject); //初始化播放器
    }
</script>

---

总结

uniapp中的坑点还是很多的。但是谁让咱不会原生呢。：）