vue使用videoJS播放m3u8视频_vue+video.js 播放 m3u8 视频流

vue使用videoJS播放m3u8视频

由于项目中的视频返回格式是m3u8，于是选择较为成熟的video.js，这里先贴上官网文档地址https://docs.videojs.com/

进入可以看到插件的API和使用指南，还包括angularJS、react等框架的使用方法，因为项目用的vue框架，这里直接看vue的使用。

vue引用

npm install --save-dev video.js
1

安装成功后，在man.js文件下引入对应的css样式，并进行全局组件注册

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = videojs;
1
2
3

单页面使用

//HTML部分
<div id='fid'>
  <video ref="videoPlayer" class="video-js"></video>
</div>

//ts部分
<script lang='ts'>
  export default class VideoItem extends Vue {
  this.options = {
    autoplay: true, // 如果true,浏览器准备好时开始播放。
    muted: true, // 默认情况下将会消除任何音频。
    loop: true, // 导致视频一结束就重新开始。
    preload: 'auto', // auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    language: 'zh-CN',  //汉化
    fluid: true, // 当true时，播放器将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
     sources: [{
        type: 'application/x-mpegURL',
        src: this.videoUrl  //视频播放地址
     }],
     notSupportedMessage: '此视频暂无法播放，请稍后再试', // 无法播放媒体源时显示的默认信息。
     controlBar: {
       timeDivider: true,
       durationDisplay: true,  //视频时长时间显示
       remainingTimeDisplay: false,  //剩余时间显示
       fullscreenToggle: true // 全屏按钮
     },
     errorDisplay: false,  //错误显示
     posterImage: false,  //视频的预览海报图片显示
     bigPlayButton: true,  //视频中间的播放按钮显示
     textTrackDisplay: false
  }
  
  // 视频初始化
  this.player = this.$video(this.$refs.videoPlayer, this.options);
  this.player.play();
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

到这一步视频就可以播放了，因为我们项目的视频是m3u8格式，在设置sources的时候，type需要设置为application/x-mpegURL，目前使用已知支持的视频格式有mp4、rtmp、flv还有目前正在使用的m3u8，其他格式需要各位看官自行搜索是否是否支持了。同时，options可设置的不仅仅是上面的内容，通过文档可以查看其他设置，https://docs.videojs.com/tutorial-options.html#controls。

切换视频地址

我们项目里用到的是选集播发视频，所以需要切换不同的集数，下面对于切换视频地址贴上简单的示例。

//HTML部分
<el-select v-model="videoUrl" placeholder="请选择" size="medium" @change="changeVideo">
  <el-option v-for="item in videoOptions" :key="item.indexCode" :label="item.name" :value="item.url"></el-option>
</el-select>

//ts部分
<script lang="ts">
  changeVideo() {
    //1.切换视频直接替换sources里的src是无效的，需要将整个videojs替换，更改src
    //2.通过dispose()方法销毁当前videojs实例
    //3.通过父id查找视频需要添加的位置，创建一个video标签
    //4.将创建好的videoappendChild()添加至父id下
    this.player.dispose();
     // 创建一个标签
    var newVideo = document.createElement('video');
    // 设置video标签的id，以便创建videojs实例
    newVideo.setAttribute('id', 'myVideo'); 
    // 设置新video的样式
    newVideo.setAttribute('class', 'video-js vjs-default-skin vjs-big-play-centered');
    // 通过id号获取newVideo的父节点（也就是上一级的节点）
    var Fid = document.getElementById('fid');
    Fid.appendChild(newVideo);
    // 创建切换播放地址后的video实例
    this.player = this.$video(‘myVideo’, this.options);
    this.player.play();
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

到此，视频地址的切换功能也完成了。因为是实时切换剧集视频，目前还有个问题还没解决，当视频播放到一定时间后，就会存在视频加载问题，会造成视频播放不够流畅，这个问题还在研究中，解决后会继续更新到这篇文章里。由于初次使用videoJS插件，还有很多功能不够熟悉需要继续研究，各位看官也可以直接在评论区进行交流。