只需替换播放地址即可播放,完整代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><!-- hls.js必须引入,可下载至本地 -->
<style type="text/css">
</style>
</head>
<body>
<div>
<video id="video" width='auto' height="400" src="" controls autoplay muted></video>
</div>
</body>
<script type="text/javascript">
//播放地址
var hlsUrl="http://192.168.1.1:8080/aaaaaa.m3u8";//需要替换为自己的视频流地址
//播放视频流
function loadVideo(){
var video = document.getElementById('video');//获取 video 标签
if(Hls.isSupported()) {
var hls = new Hls();//实例化 Hls 对象
hls.loadSource(hlsUrl);//传入路径
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
video.play();//调用播放 API
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = hlsUrl;
video.addEventListener('loadedmetadata',function() {
video.play();
});
}
}
//方法调用
loadVideo();
</script>
</html>
附:注意:
hls.js必须引入,可在线引入:<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
也可以下载后导入本地项目中,然后引入:<script language="javascript" type="text/javascript" src="../public/js/hls.js" charset="gb2312" ></script>
在线引入不安全,最好下载后引入!
也可在这下载:https://download.csdn.net/download/qq_15023917/13025178