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 版权协议,转载请附上原文出处链接和本声明。