关于uni-app:uniapp-video标签打包H5Android上支持播放m3u8-hls直播流

39次阅读

共计 1079 个字符，预计需要花费 3 分钟才能阅读完成。

默认 uni-app 打包进去的 H5 在 Android 上是没法播放.m3u8 直播流的，控制台或报错

Uncaught (in promise) DOMException: The element has no supported sources.

能够用 hls.js 来解决，在 App.vue 的 onLaunch 办法中减少加下列代码即可:

// 上面的代码减少对 Android H5 播放 m3u8 反对
// #ifdef H5
if (uni.getSystemInfoSync().platform != 'ios') {var script = document.createElement("script");
    script.src = "https://cdn.jsdelivr.net/npm/hls.js@latest";
    script.onload = function() {let init = function(video) {if (!video.getAttribute('hls-inited')) {
                let hls = null;
                let load = function() {
                    let src = video.src;
                    if (!src || src.indexOf('.m3u8') < 0)
                        return
                    if (!hls) {hls = new Hls();
                        hls.attachMedia(video);
                    }
                    hls.loadSource(src);
                }
                video.addEventListener("error", function() {load();
                }, false);
                video.addEventListener("DOMNodeRemovedFromDocument",function(){if(hls){hls.destroy()
                    }
                }, false);
                video.setAttribute('hls-inited', 'ok');
            }
        }
        document.getElementsByTagName("video").forEach(init)
        document.body.addEventListener("DOMNodeInserted", function(e) {
            let ele = e.relatedNode;
            if (ele.tagName === 'VIDEO') {init(ele);
            }
            ele.getElementsByTagName("video").forEach(init)
        })
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(script, s);
}
// #endif

正文完