<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>演示：HTML5播放m3u8(hls)格式视频</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style>
</style>
</head>
<body>
<div class="container">
<div>
<video id="video" controls loop="false" width="100%"></video>
</div>
<button id = "btn">播放位置</button>
</div>
<script src="js/hls.js"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script>
var video = document.getElementById('video');
if(Hls.isSupported()) {
var hls = new Hls();
hls.loadSource('http://127.0.0.1:8765/hls/test.m3u8');
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = 'http://127.0.0.1:8765/hls/test.m3u8';
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
$("#btn").click(function(){
//获取播放位置用于截图
alert(video.currentTime);
})
</script>
</body>
</html>
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码
3星 · 超过75%的资源 需积分: 38 127 浏览量
2020-01-03
15:33:21
上传
评论 3
收藏 243KB ZIP 举报 
HTML5播放m3u8(hls)格式视频以及播放直播m3u8(hls)视频完整代码.zip （8个子文件） 
css 
DPlayer.min.css 43KB bootstrap.min.css 120KB demo.css 2KB
index.html 1KB js jquery-1.6.2.min.js 89KB hls.js 242KB clappr.min.js 534KB 本地媒体映射播放直播m3u8(hls)格式视频播放器.html 799B资源评论
txdc2021-03-18根本就用不起！
nxt2022-08-12还可以，就是没有历史播放的功能
