vue中通过hls.js播放m3u8格式的视频
vue 2020-06-10 21:28:16

 一、m3u8和HLS介绍

1.M3U8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。

2.HLS 与 M3U8 HLS(全称:Http Live Streaming)是由Apple公司定义的用于实时流传输的协议

 

二、在vue项目中使用HLS播放m3u8

GitHub地址：https://github.com/surmon-china/vue-video-player

文档地址：https://docs.videojs.com/tutorial-options.html

 

安装插件

JavaScript Code复制内容到剪贴板
  1. npm install vue-video-player -s  
  2. npm install videojs-contrib-hls.js -s  
  3.   
  4. npm install sass-loader -s  

 

// 安装sass-loader是因为万一你项目中要写css，如果只是看视频的话，可以不安装

// 安装完sass-loader后，在 build--webpack.base.conf.js中大概32行的module对象中配置css代码：

{

    test: /\.scss$/,

    loaders: ['style', 'css', 'sass']

} 

配置main.js

JavaScript Code复制内容到剪贴板
  1. import VideoPlayer from 'vue-video-player'  
  2. Vue.use(VideoPlayer)  

 

编写vue页面 

XML/HTML Code复制内容到剪贴板
  1. // 可以直接在components的HelloWorld.vue里面写，也可以src中任意地方新建vue页面来写，下面是vue页面的完整代码  
  2. // 注意三个import引用即可  
  3.   
  4. <template>  
  5.   <div class="player-container">  
  6.     <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>  
  7.   </div>  
  8. </template>  
  9.   
  10. <script>  
  11.   //引入video样式  
  12.   import 'video.js/dist/video-js.css'  
  13.   import 'vue-video-player/src/custom-theme.css'  
  14.   
  15.   //引入hls.js  
  16.   import 'videojs-contrib-hls.js/src/videojs.hlsjs'  
  17.   
  18.   export default {  
  19.     name:'HelloWorld',  
  20.     data () {  
  21.       return {  
  22.         playerOptions: {  
  23.           playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度  
  24.           autoplay: false, //如果true,浏览器准备好时开始回放。  
  25.           controls: true, //控制条  
  26.           preload: 'auto', //视频预加载  
  27.           muted: false, //默认情况下将会消除任何音频。  
  28.           loop: false, //导致视频一结束就重新开始。  
  29.           language: 'zh-CN',  
  30.           aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）  
  31.           fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。  
  32.           sources: [{  
  33.             type: 'application/x-mpegURL',  
  34.             src: 'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'  
  35.           }],  
  36.           poster: "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址  
  37.           width: document.documentElement.clientWidth,  
  38.           notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。  
  39.         }  
  40.       }  
  41.     },  
  42.     methods: {  
  43.     },  
  44.     computed: {  
  45.     }  
  46.   }  
  47. </script>  

 

 完成

 

 

实测，报错，也有可能操作有问题，hls.js在html页面，是可以正常播放的，但是在vue中报错

Uncaught TypeError: Cannot read property 'readyState' of null
at XhrLoader.readystatechange (hls.js?ba56:14379)
at MockXMLHttpRequest.dispatchEvent (mock.js?411c:8517)
at XMLHttpRequest.handle (mock.js?411c:8335)

 

解答：由于在main.js中，引入了mock所以监控地址被篡改引起的错题

 

二、nuxt项目中使用HLS播放m3u8

1.安装hls.js依赖，可以通过npm安装依赖

JavaScript Code复制内容到剪贴板
  1. npm install hls.js --save  

也可以通过引入的方式

XML/HTML Code复制内容到剪贴板
  1. <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>  

 

2.代码实现

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.   <section>  
  3.     <video class="full-height full-width" ref="video" controls></video>  
  4.   </section>  
  5. </template>  
  6.   
  7. <script>  
  8.   let Hls = require('hls.js');  
  9.   export default {  
  10.     data() {  
  11.       return {  
  12.         hls: ''  
  13.       };  
  14.     },  
  15.     mounted() {  
  16.       this.$axios.get('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx').then(res => {  
  17.         this.getStream(res.data);  
  18.       });  
  19.     },  
  20.     methods: {  
  21.       videoPause() {  
  22.         if (this.hls) {  
  23.           this.$refs.video.pause();  
  24.           this.hls.destroy();  
  25.           this.hls = null;  
  26.         }  
  27.       },  
  28.       getStream(source) {  
  29.         if (Hls.isSupported()) {  
  30.           this.hls = new Hls();  
  31.           this.hls.loadSource(source);  
  32.           this.hls.attachMedia(this.$refs.video);  
  33.           this.hls.on(Hls.Events.MANIFEST_PARSED, () => {  
  34.             console.log('加载成功');  
  35.             this.$refs.video.play();  
  36.           });  
  37.           this.hls.on(Hls.Events.ERROR, (event, data) => {  
  38.             // console.log(event, data);  
  39.             // 监听出错事件  
  40.             console.log('加载失败');  
  41.           });  
  42.         }  
  43.       },  
  44.       beforeDestroy() {  
  45.         this.videoPause();  
  46.       }  
  47.     }  
  48.   };  
  49. </script>  

 

页面初始化mounted的时候，获取到m3u8视频的链接，然后通过getStream()方法加载视频，也通过videoPause()方法停止视频播放

 

 

以上两种方式皆可以。

 

 

本文来自于：http://www.yoyo88.cn/study/vue/514.html

上一篇 首次赋值不触发watch的解决方法
下一篇 ant design for react
相关的文章
Powered by yoyo苏ICP备15045725号