video.js 播放m3u8、flv、rtmp、RTS格式视频

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>videoJs</title><link href="https://vjs.zencdn.net/7.18.1/video-js.css" rel="stylesheet" />&l

hy_208

6838人浏览 · 2022-05-18 10:43:29

hy_208 · 2022-05-18 10:43:29 发布

第一种方案（只适用m3u8格式）：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>videoJs</title>
 
      <link href="https://vjs.zencdn.net/7.6.6/video-js.css" rel="stylesheet" />
    
      <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
      <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    </head>
    <body>
        <section id="videoPlayer">
            <video id="my-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster="">
                <source src="m3u8" type="application/x-mpegURL" id="target"> 
 
            </video>
        </section>
      <script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
        <script type="text/javascript">
            var player = videojs('my-video', { "poster": "", "controls": "true",autoplay:true ,preload: 'auto',muted: true, }, function() {
                this.on('play', function() {
                    console.log('正在播放');
                });
                //暂停--播放完毕后也会暂停
                this.on('pause', function() {
                    console.log("暂停中")
                });
                // 结束
                this.on('ended', function() {
                    console.log('结束');
                })
 
            });
        </script>
    </body>
</html>

属性说明

options: {
autoplay: true, // 设置自动播放
muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音（Chrome66及以上版本，禁止音视频的自动播放）
preload: 'auto', // 预加载
controls: true // 显示播放的控件
},

第二种方案（阿里云文档地址快速接入 - 视频点播 - 阿里云）

<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.20/skins/default/aliplayer-min.css" />  
  <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.20/aliplayer-h5-min.js"></script>  
  </head>
 <body>
  <div id="J_prismPlayer"></div>
</body>
<script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '直播路径',
    isLive: true,
    },function(player){
      console.log('The player is created.')
    });
</script>
</html>