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

最新推荐文章于 2024-07-08 18:26:28 发布

冉冉胜起

最新推荐文章于 2024-07-08 18:26:28 发布

阅读量6.7k

点赞数 1

分类专栏：前端 JS 文章标签： html html5

本文链接：https://blog.csdn.net/qq_15023917/article/details/109241258

版权

前端同时被 2 个专栏收录

26 篇文章 2 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

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

<!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

冉冉胜起

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
video标签播放m3u8格式视频流完整代码

只需替换播放地址即可播放，完整代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script><!-- hls.js必须引入，
复制链接

扫一扫

专栏目录