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

最新推荐文章于 2024-06-06 10:37:10 发布

最新推荐文章于 2024-06-06 10:37:10 发布

阅读量1.2k

点赞数

分类专栏： 02工作中收集的问题及解决办法文章标签： HTML5 播放 hls 流媒体视频

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/milkbrother1988/article/details/103908915

版权

02工作中收集的问题及解决办法专栏收录该内容

29 篇文章 1 订阅

订阅专栏

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>

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
开发类 - HTML5 播放 hls 流媒体视频

1.资源下载：https://pan.baidu.com/s/1IZ4HKhNg08cbmDBl4FGYJg2.本机地址：http://127.0.0.1:8888/hls/home.m3u83.说明：经测试，在最新版的 Android webview 中不用任何插件，可以直接播放经测试，在windows10自带的Edge浏览器可直接播放，PC端 safari浏览...
复制链接

扫一扫