• 售前

  • 售后

热门帖子
入门百科

怎样在vue中使用video.js播放m3u8格式的视频

[复制链接]
没有昵称513 显示全部楼层 发表于 2021-10-25 20:01:41 |阅读模式 打印 上一主题 下一主题
目录


  • 一、安装
  • 二、引入videojs
  • 三、在组件中测试并使用

    • 1. 实现根本的主动播放
    • 2. 实现换台

  • 四、踩坑小记

    • 1. 视频不能主动播放 或报错 DOMException: play() failed
    • 2. 换台的时间,url已经乐成更改,但视频还是之前的
    • 3. 找不到mux.js模块

  • 五、 播放rtmp流
@[toc] 注意:
  1. "vue": "^2.6.11",
  2. "video.js": "^7.10.2",
  3. "videojs-contrib-hls": "^5.15.0",
  4. "mux.js": "^5.7.0"
复制代码
一、安装
  1. yarn add video.js
  2. yarn add videojs-contrib-hls // 这是播放hls流需要的插件
  3. yarn add mux.js // 在vue项目中,若不安装它可能报错
复制代码
二、引入videojs


1.在src文件夹下新建 plugins文件夹,并新建video.js文件;
video.js文件的内容如下:
  1. import "video.js/dist/video-js.css"; // 引入video.js的css
  2. import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
  3. import Vue from "vue";
  4. Vue.use(hls);
复制代码
2.在main.js中引入刚刚的video.js文件
  1. import "./plugins/video.js"; // 引入刚刚定义的video.js文件
复制代码
三、在组件中测试并使用



1. 实现根本的主动播放


Test.vue文件
  1. <template>
  2. <div class="test-videojs">
  3. <video id="videoPlayer" class="video-js" muted></video>
  4. </div>
  5. </template>
  6. <script>
  7. import Videojs from "video.js"; // 引入Videojs
  8. export default {
  9. data() {
  10. return {
  11. // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 是一段视频,可将cctv1 (是live现场直播,不能快退)的替换为它,看到快进快退的效果
  12.   nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
  13. };
  14. },
  15. mounted() {
  16. this.initVideo(this.nowPlayVideoUrl);
  17. },
  18. methods: {
  19. initVideo(nowPlayVideoUrl) {
  20.   // 这些options属性也可直接设置在video标签上,见 muted
  21.   let options = {
  22.   autoplay: true, // 设置自动播放
  23.   controls: true, // 显示播放的控件
  24.   sources: [
  25.    // 注意,如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
  26.    {
  27.    src: nowPlayVideoUrl,
  28.    type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
  29.    }
  30.   ]
  31.   };
  32.   // videojs的第一个参数表示的是,文档中video的id
  33.   const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
  34.   console.log("onPlayerReady 中的this指的是:", this); // 这里的this是指Player,是由Videojs创建出来的实例
  35.   console.log(myPlyer === this); // 这里返回的是true
  36.   });
  37. }
  38. }
  39. };
  40. </script>
  41. <style lang="scss">
  42. #videoPlayer {
  43. width: 500px;
  44. height: 300px;
  45. margin: 50px auto;
  46. }
  47. </style>
复制代码
视频播放效果如图:

打印结果如图:


2. 实现换台


Test.vue文件
  1. <template>
  2. <div class="test-videojs">
  3. <video id="videoPlayer" class="video-js"></video>
  4. <el-button type="danger" @click="changeSource">切换到CCTV3</el-button>
  5. </div>
  6. </template>
  7. <script>
  8. import Videojs from "video.js"; // 引入Videojs
  9. export default {
  10. data() {
  11. return {
  12.   nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
  13.   options: {
  14.   autoplay: true, // 设置自动播放
  15.   muted: true, // 设置了它为true,才可实现自动播放,同时视频也被静音 (Chrome66及以上版本,禁止音视频的自动播放)
  16.   preload: "auto", // 预加载
  17.   controls: true // 显示播放的控件
  18.   },
  19.   player:null
  20. };
  21. },
  22. mounted() {
  23. this.getVideo(this.nowPlayVideoUrl);
  24. },
  25. methods: {
  26. getVideo(nowPlayVideoUrl) {
  27.   this.player = Videojs("videoPlayer", this.options);
  28.   //关键代码, 动态设置src,才可实现换台操作
  29.   this.player.src([
  30.   {
  31.    src: nowPlayVideoUrl,
  32.    type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
  33.   }
  34.   ]);
  35. },
  36. changeSource() {
  37.   this.nowPlayVideoUrl = "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8";
  38.   console.log(this.nowPlayVideoUrl, "改变了");
  39. }
  40. },
  41. watch: {
  42. nowPlayVideoUrl(newVal, old) {
  43.   this.getVideo(newVal);
  44. }
  45. },
  46. beforeDestroy() {
  47. if (this.player) {
  48.   this.player.dispose(); // Removing Players,该方法会重置videojs的内部状态并移除dom
  49. }
  50. }
  51. };
  52. </script>
  53. <style lang="scss">
  54. #videoPlayer {
  55. width: 500px;
  56. height: 300px;
  57. margin: 50px auto;
  58. }
  59. </style>
复制代码
视频切换效果如图:



四、踩坑小记



1. 视频不能主动播放 或报错 DOMException: play() failed


需用muted属性办理
报错信息:DOMException: play() failedbecause the user didn't interact with the document first.(用户还没有交互,不能调用play)
办理办法:设置muted属性为true
  1. <video id="videoPlayer" class="video-js" muted></video>
复制代码
关于muted属性:
      
  • muted 属性,设置或返覆信频是否应该被静音(关闭声音);属性的值是true和false;  
  • muted="false" 体现视频不用静音(视频播放便有声音),但设置 muted="fasle" 的环境下,视频无法实现主动播放。  
  • video 标签中 muted 的作用: 允许视频主动播放;(Chrome66版本开始,禁止视频和音频的主动播放)

2. 换台的时间,url已经乐成更改,但视频还是之前的


需得动态设置src才能实现
  1. // 动态设置src
  2. this.player.src([
  3.   {
  4.    src: nowPlayVideoUrl,
  5.    type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
  6.   }
  7. ]);
复制代码
3. 找不到mux.js模块


报错信息:* mux.js/lib/tools/parse-sidx in ./node_modules/video.js/dist/video.es.js To install it, you can run: npm install --save mux.js/lib/tools/parse-sidx
办理办法:安装mux.js
  1. yarn add mux.js
复制代码
五、 播放rtmp流


播放rtmp流的利用与播放hls流的利用几乎相同,不同在于:
  1. import "videojs-flash"; // 播放rtmp流需要的插件
  2. type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频
复制代码
以上就是如何在vue中使用video.js 播放m3u8格式的视频的详细内容,更多关于vue 使用videojs 播放m3u8格式的视频的资料请关注草根技术分享别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作