video标签播放m3u8格式视频流完整代码

只需替换播放地址即可播放，完整代码如下：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title> 
		<script src="https://cdn.jsdelivr/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/npm/hls.js@latest"></script>

也可以下载后导入本地项目中，然后引入：<script language="javascript" type="text/javascript" src="../public/js/hls.js" charset="gb2312" ></script>

在线引入不安全，最好下载后引入！

也可在这下载：https://download.csdn/download/qq_15023917/13025178

更多推荐

video标签播放m3u8格式视频流完整代码