video插件播放m3u8格式视频(存原生)

这里使用原生的javascript实现m3u8格式视频播放。

使用了包括video.min.js库和HLS插件。

1-基础使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Video.js HLS Example</title>
  	<!-- add dependency -->
    <link href="https://vjs.zencdn.net/7.7.6/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/7.7.6/video.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-contrib-hls.min.js"></script>
</head>
<body>
  	<!-- create viedo element -->
    <video 
    	id="my-video"
      class="video-js" 
      width="1280" 
      height="720"
    	data-setup='{
     
     "autoplay": true, "controls": false, "preload": "auto", "fluid": false, "controlBar": false}'
    >
    	<source src="#" type="application/x-mpegURL">
    </video>
    <script>
      var url = 'https://36689.live-vod.cdn.aodianyun.com/m3u8/0x0/aqes_36689.aqes0.1628058327/aqes_36689.aqes0.1628058327.m3u8';
      // 页面加载完毕后执行播放逻辑，在之前可以异步获取视频播放url
      window.onload = function() {
      
      
        var player = videojs('my-video');
        player.src({
      
      src: url, type: 'application/x-mpegURL'})
      	player.play();
      }
    </script>
</body>
</html>

在上面代码中，首先引入了video.min.js库和对应的播放器样式video-js.css，还引入了videojs-contrib-hls.min.js库(引入顺序考虑优先放到页面加载之前)。

之后，创建一个video标签，并指定source的src属性为一个占位地址，如果不给一个占位地址，在后面动态赋值src时会导致游览器报错；这里关于视频播放的一些配置放到了data-setup中(json的格式)，具体含义如下：

autoplay：是否自动播放
controls：是否现实进度条操作栏
preload：设置为auto，表示自动加载视频
fluid：是否自适应父容器大小
controlBar: 设置为false，表示不显示控制栏目

注意：

autoplay属性需要在用户与页面进行过交互后才能生效，以保护用户体验和隐私。因此，如果需要实现完全自动播放，可以考虑使用其他解决方案，例如在用户点击页面时触发播放。

最后，使用JavaScript代码创建一个videojs的实例，并动态给予视频播放地址，再调用play()方法开始播放视频。

需要注意的是，HLS插件需要在支持MSE（Media Source Extensions）和HLS的浏览器中才能正常工作。如果浏览器不支持这些功能，可以考虑使用其他的插件或库来播放m3u8视频格式。

2-如何切换播放地址

在每次切换播放下一个视频时，一定需要销毁上一个播放实例，即使用 player.dispose() 方法。

player.dispose() 该方法会销毁videojs实例以及其相关的DOM元素和事件监听器，从而将视频播放器还原为初始状态。

按实际情况判断，一般有两种情况需要进行播放实例销毁，一是视频需要切换的时候(用户主动执行的操作的情况)；二是视频播放完成的时候。

扫描二维码关注公众号，回复： 16534480 查看本文章

第一种情况只需要监听用户进行对应的按钮操作的时候即可，比较简单。

第二种情况可以在视频播放之后，添加监听player播放实例上ended事件，再该事件中去执行播放的销毁。

// ...
    <script>
      var url = 'https://36689.live-vod.cdn.aodianyun.com/m3u8/0x0/aqes_36689.aqes0.1628058327/aqes_36689.aqes0.1628058327.m3u8';
      // 页面加载完毕后执行播放逻辑，在之前可以异步获取视频播放url
      window.onload = function() {
    
    
        var player = videojs('my-video');
        player.src({
    
    src: url, type: 'application/x-mpegURL'})
      	player.play();
        
        // 监听播放完成事件，执行播放实例销毁
        player.on('ended', function() {
    
    
        	player.dispose();
        });
      }
    </script>
// ...

3-如何通过player实例控制视频基础操作

// ...
    <script>
    	var player = videojs('my-video');
    	player.play(); // 自动播放
      player.currentTime(10); // 快进到10秒
      player.currentTime(player.currentTime() - 5); // 快退5秒
      player.pause(); // 暂停播放
    </script>
// ...

上面的代码中，通过设置播放实例下currentTime方法实现播放的快进和快退，该方法接受一个参数，表示设置的时间点，如果不传参数，表示获取当前视频播放的时间点。

currentTime方法再不接受参数的时候，可以实现快退的方法。

设置pause的方法可以实现视频暂停的方法。

4-如何实现完全自动播放的功能

在HTML5标准中，自动播放的行为是被禁止的，如果播放器被设置为自动播放，则会被浏览器禁止。这是出于用户体验和减轻带宽压力等方面的考虑。

但在某些情况下，我们仍然希望实现自动播放，因此可以考虑下面的实现方法。

一、用户操作触发自动播放：

可以监听页面加载完成事件，在页面加载完成后触发播放按钮的点击事件，从而触发自动播放。示例代码如下：

var player = videojs('my-video');
player.ready(function() {
    
    
  var promise = player.play();
  if (promise !== undefined) {
    
    
    promise.then(function() {
    
    
      // 自动播放成功
    }).catch(function(error) {
    
    
      // 自动播放失败，需要用户手动触发播放
      player.on('play', function() {
    
    
        player.play();
      });
    });
  }
});

二、Muted自动播放

可以将视频设置为静音，从而规避浏览器自动播放的限制。示例代码如下：

var player = videojs('my-video');
player.muted(true);
player.play();

需要注意的是，静音自动播放可能会被用户感知到，并影响用户体验。

三、自动播放和手动播放切换（不适用）

可以通过监听用户的操作，从而判断是否需要自动播放。例如，在用户第一次点击播放按钮后，取消静音并自动播放。示例代码如下：

var player = videojs('my-video');
player.on('play', function() {
    
    
  player.muted(false);
  player.off('play'); //取消对播放的监听
});
player.play();