开发类 – HTML5 播放 hls 流媒体视频

  • Post author:
  • Post category:其他


1.资源下载:

https://pan.baidu.com/s/1IZ4HKhNg08cbmDBl4FGYJg

2.本机地址:

http://127.0.0.1:8888/hls/home.m3u8

3.说明:

经测试,在最新版的 Android webview 中不用任何插件,可以直接播放

经测试,在windows10自带的Edge浏览器 可直接播放,PC端 safari浏览器 可直接播放

经测试,PC端chrome,IE,Firefox以及集成以上内核的各种浏览器,以及旧版的Android SDK的webview 不能播放

4.在不能播放的情况下,需要引入hls.js,示例:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <base th:href="${basePath}">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>HTML5播放视频</title>
    <script src="hls.js" charset="utf-8"></script>
</head>
<body onload="play('http://127.0.0.1:8888/hls/home.m3u8')">

<div class="player_container">
    <video id="video" class="player" muted autoplay loop>
        浏览器不支持 video 标签。
    </video>
</div>
</div>

<body>

<script>
function play(url) {
    if (Hls.isSupported()) {
    
        let hls = new Hls();
        let video = document.getElementById('video');
    
        hls.loadSource(url);
        hls.attachMedia(video);
    
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
        })

        hls.on(Hls.Events.ERROR, function () {
        })
    }
}
</script>		
</body>
</body>
</html>



版权声明:本文为milkbrother1988原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。