全面了解videojsm3u8

发布时间：2023-05-19

videojsm3u8是建立在video.js之上的、用于HLS流媒体的插件，它提供了一个简单易用的界面，使得在web上播放HLS流媒体变得简单。下面，我们来分别从使用方法、插件API、参数配置和自定义皮肤等多个方面来介绍videojsm3u8，并给出完整的代码示例。

一、使用方法

首先，在网页中引入video.js和videojs.m3u8插件的js文件和css文件：

<!-- 引入video.js -->
<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.14.3/video.js"></script>
<!-- 引入videojs.m3u8插件 -->
<link href="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@5.15.0/dist/videojs-contrib-hls.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-hls@5.15.0/dist/videojs-contrib-hls.min.js"></script>

接着，在HTML页面中添加一个video标签：

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
    <source src="https://example.com/my-video.m3u8" type="application/x-mpegURL">
</video>

其中，class="video-js"表示使用video.js的样式，data-setup="{}"表示使用video.js的默认设置，src="https://example.com/my-video.m3u8"表示这个视频文件的HLS流地址。 最后，在js文件中初始化video.js并添加m3u8插件：

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

以上代码即可在网页上播放HLS流媒体。

二、插件API

videojs.m3u8插件为video.js增加了一些API方法，这些API方法可以用于控制HLS流媒体的播放、暂停、重新加载等操作。 以下是一些常用的插件API：

  • player.hls(): 获取当前视频的HLS插件实例对象。
  • player.hls.startLoad(): 开始加载视频流。
  • player.hls.stopLoad(): 停止加载视频流。
  • player.hls.dispose(): 注销HLS插件。
  • player.hls.on(event, listener): 添加一个事件监听器。
  • player.hls.off(event, listener): 移除一个事件监听器。 其中，事件的类型包括 loadedmetadata、loadeddata、loadedplaylist、error 等。 以下是使用插件API进行播放控制的示例代码：
var player = videojs('my-video');
player.play();
setTimeout(function() {
  player.hls.startLoad();
}, 5000);
setTimeout(function() {
  player.hls.stopLoad();
}, 10000);

三、参数配置

videojs.m3u8插件提供了一些配置参数，可以用于定制化的播放器的行为。 以下是一些常用的配置参数：

  • hls: 设置HLS插件实例的参数。
  • autoplay: 自动播放，默认为 false。
  • preload: 预加载行为，默认为 auto。如果设置 none，则不预加载任何数据；如果设置 metadata，则只预加载元数据信息；如果设置 auto，则预加载整个视频文件。
  • loop: 循环播放，默认为 false。
  • poster: 封面图片地址。 以下是使用参数配置播放器的示例代码：
var player = videojs('my-video', {
  autoplay: true,
  preload: 'auto',
  loop: true,
  poster: 'https://example.com/my-video-poster.jpg',
  hls: {
    enableLowInitialPlaylist: true,
    overrideNative: true
  }
});

四、自定义皮肤

通过自定义CSS样式，可以改变video.js的外观，让它更符合自己的需求。 以下是一个自定义皮肤的示例代码：

/* 定义主色调 */
.video-js .vjs-big-play-button {
  background-color: #48BFCB;
  background-image: none;
}
/* 去掉控制条的默认样式 */
.vjs-default-skin .vjs-control-bar {
  font-size: 1rem;
  height: 1.5em;
  padding: 0.5em 0;
  background-color: rgba(0,0,0,0.5);
  box-shadow: 0px -12px 12px rgba(0, 0, 0, 0.5);
  transition: height 0.4s ease-out, padding 0.4s ease-out;
}
/* 控制条鼠标移动到上面后的样式 */
.vjs-default-skin .vjs-control-bar:hover {
  height: 2.5em;
  padding: 0.5em 0 1em 0;
}
/* 去掉播放暂停图标的默认样式 */
.vjs-default-skin .vjs-play-control,
.vjs-default-skin .vjs-paused-control {
  height: 1.5em;
  width: 1.5em;
  font-size: 1.5rem;
  margin: 0;
  background: none;
  border: none;
  line-height: 1.5em;
  color: #fff;
}
/* 播放按钮 */
.vjs-default-skin .vjs-play-control:before,
.vjs-default-skin .vjs-paused-control:before {
  content: '';
  display: block;
  height: 1.5em;
  width: 1.5em;
  background-color: transparent;
}
/* 暂停按钮 */
.vjs-default-skin .vjs-paused-control:before {
  content: '\u23f8';
}
/* 当视频不可播放时 */
.video-js.vjs-default-skin .vjs-error-display{
  background-image: none;
  color: #fff;
  display: block;
  font-size: 1rem;
  left: 0;
  line-height: 1.5rem;
  margin: 0;
  padding: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 30%;
  width: 100%;
}

以上代码可以修改video.js播放器的主色调、控制条样式、播放暂停图标和错误信息样式。

总结

videojsm3u8是一个非常方便易用的HLS流媒体播放插件，它能够让web上播放HLS流媒体变得简单。通过本文介绍，你已经可以把videojsm3u8完美地集成到你的web应用程序中，并通过插件API、参数配置和自定义皮肤等方式来控制你的视频播放器。

推荐文章