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

2024-06-21 00:05| 来源: 网络整理| 查看: 265

关于uniapp引入webview使用video.js播放hls（m3u8）格式的直播时全屏返回卡死的问题一、使用uniapp的原生video组件播放hls直播的问题二、尝试在app页面中使用webView，h5的video.js插件进行播放1.uniapp页面2.使用video.js播放直播的webview页面3.使用ckplayer播放器总结

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

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

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

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

1.uniapp页面 //返回时判断是否全屏如果是全屏则执行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的方法。要通讯的话就要引入 // video播放器的box 视频加载中,请稍候... //引入了video.js window.onload = function () { //这里用location.search获取了地址，从中提取传过来的参数（直播地址） //处理方式因数据结构而异 let obj = location.search; let videoArr = obj.split('=')[1].split(',') let s = ''; //可能多个视频，所以加了循环 for (let i = 0; i //监听了全屏变化的事件 if (document.fullscreenElement) { isFull = 0 } else { isFull = 1 } //将是否全屏传到uniapp中 uni.postMessage({ data: { action: isFull } }); }); } //定义了一个方法用于退出全屏（uniapp中全屏返回时调用了） function cancelFull() { document.webkitCancelFullScreen(); }; 3.使用ckplayer播放器

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

// ckplayer --> 视频加载中,请稍候... //同上，处理参数传过来的的直播数据 let obj=location.search; let videoArr = obj.split('=')[1].split(',') let s = ''; for (let i = 0; i var videoObject = { container: '.video'+i, //“#”代表容器的ID，“.”或“”代表容器的class variable: 'player', //播放函数名称，该属性必需设置，值等于下面的new ckplayer()的对象 video: videoArr[i], //视频地址 live:true, autoplay:true }; var player = new ckplayer(videoObject); //初始化播放器 } 总结

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

【本文地址】

公司简介

联系我们