chrome播放hls流

最新推荐文章于 2024-06-06 10:37:10 发布

flower丶荻

最新推荐文章于 2024-06-06 10:37:10 发布

阅读量1.3k

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_46840784/article/details/126596450

版权

方法是引用他人的。
1.使用网络js文件


<!DOCTYPE html>  
<html lang="zh-CN">  

<head>  
    <meta charset="UTF-8">  
    <title>demo</title>  
    <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
    <script src="https://vjs.zencdn.net/7.0.3/video.js"></script>
    <style>
        .uls{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            text-align: center
        }
        .lis{
            list-style-type: none;
        }
    </style>
</head>
 
<body>
   <ul class="uls">
       <li class="lis">
            <h1>1</h1>
            <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" muted controls autoplay  preload="auto" width="500" height="400" data-setup='{}'>      
                <source id="source" src="hls流"  type="application/x-mpegURL">    
            </video>  
       </li>
	   
	   <li class="lis">
            <h1>2</h1>
            <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" muted controls autoplay  preload="auto" width="500" height="400" data-setup='{}'>      
                <source id="source" src="hls流"  type="application/x-mpegURL">    
            </video>  
       </li>
   </ul>
</body>  
</html>

2.使用本地js文件
链接：https://pan.baidu.com/s/1lI95dNP5GK3P4UP5mDrqlg
提取码：q5s4

<!DOCTYPE html>
<html>
    <head>
        <title>播放器</title>
        <!-- 导入的videojs是7.0版本以上的，集成VHS协议库，可播放HLS流媒体视频 -->
        <link href="./video-js.min.css" rel="stylesheet" type="text/css">
        <script src="./video.min.js"></script>
    </head>
    <body>
        <video id='myvideo' width=960 height=540 class="video-js vjs-default-skin" controls>
            <!-- hls直播源地址：CCTV1高清 -->
            <source src="hls流">    
        </video>
        <script> 
            var player = videojs('myvideo', {}, function(){console.log('videojs播放器初始化成功')})
            player.play();
        </script>
    </body>
</html>