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


Posted in Vue.js onFebruary 01, 2021

@[toc] 注意:

"vue": "^2.6.11",
 "video.js": "^7.10.2",
 "videojs-contrib-hls": "^5.15.0",
 "mux.js": "^5.7.0"

一、安装

yarn add video.js
yarn add videojs-contrib-hls // 这是播放hls流需要的插件
yarn add mux.js // 在vue项目中,若不安装它可能报错

二、引入videojs

1.在src文件夹下新建 plugins文件夹,并新建video.js文件;

video.js文件的内容如下:

import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
import Vue from "vue";
Vue.use(hls);

2.在main.js中引入刚刚的video.js文件

import "./plugins/video.js"; // 引入刚刚定义的video.js文件

三、在组件中测试并使用

1. 实现基本的自动播放

Test.vue文件

<template>
 <div class="test-videojs">
 <video id="videoPlayer" class="video-js" muted></video>
 </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs 
export default {
 data() {
 return {
 // https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 是一段视频,可将cctv1 (是live现场直播,不能快退)的替换为它,看到快进快退的效果
  nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
 };
 },
 mounted() {
 this.initVideo(this.nowPlayVideoUrl);
 },
 methods: {
 initVideo(nowPlayVideoUrl) {
  // 这些options属性也可直接设置在video标签上,见 muted
  let options = {
  autoplay: true, // 设置自动播放
  controls: true, // 显示播放的控件
  sources: [
   // 注意,如果是以option方式设置的src,是不能实现 换台的 (即使监听了nowPlayVideoUrl也没实现)
   {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
   }
  ]
  };
  // videojs的第一个参数表示的是,文档中video的id
  const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
  console.log("onPlayerReady 中的this指的是:", this); // 这里的this是指Player,是由Videojs创建出来的实例
  console.log(myPlyer === this); // 这里返回的是true
  });
 }
 }
};
</script>
<style lang="scss">
#videoPlayer {
 width: 500px;
 height: 300px;
 margin: 50px auto;
}
</style>

视频播放效果如图:

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

打印结果如图:

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

2. 实现换台

Test.vue文件

<template>
 <div class="test-videojs">
 <video id="videoPlayer" class="video-js"></video>
 <el-button type="danger" @click="changeSource">切换到CCTV3</el-button>
 </div>
</template>
<script>
import Videojs from "video.js"; // 引入Videojs
export default {
 data() {
 return {
  nowPlayVideoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",
  options: {
  autoplay: true, // 设置自动播放
  muted: true, // 设置了它为true,才可实现自动播放,同时视频也被静音 (Chrome66及以上版本,禁止音视频的自动播放)
  preload: "auto", // 预加载
  controls: true // 显示播放的控件
  },
  player:null
 };
 },
 mounted() {
 this.getVideo(this.nowPlayVideoUrl);
 },
 methods: {
 getVideo(nowPlayVideoUrl) {
  this.player = Videojs("videoPlayer", this.options);
  //关键代码, 动态设置src,才可实现换台操作
  this.player.src([
  {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
  }
  ]);
 },
 changeSource() {
  this.nowPlayVideoUrl = "http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8";
  console.log(this.nowPlayVideoUrl, "改变了");
 }
 },
 watch: {
 nowPlayVideoUrl(newVal, old) {
  this.getVideo(newVal);
 }
 },
 beforeDestroy() {
 if (this.player) {
  this.player.dispose(); // Removing Players,该方法会重置videojs的内部状态并移除dom
 }
 }
};
</script>
<style lang="scss">
#videoPlayer {
 width: 500px;
 height: 300px;
 margin: 50px auto;
}
</style>

视频切换效果如图:

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

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

四、踩坑小记

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

需用muted属性解决

报错信息:DOMException: play() failedbecause the user didn't interact with the document first.(用户还没有交互,不能调用play)

解决办法:设置muted属性为true

<video id="videoPlayer" class="video-js" muted></video>

关于muted属性:

  • muted 属性,设置或返回音频是否应该被静音(关闭声音);属性的值是true和false;
  • muted="false" 表示视频不用静音(视频播放便有声音),但设置 muted="fasle" 的情况下,视频无法实现自动播放。
  • video 标签中 muted 的作用: 允许视频自动播放;(Chrome66版本开始,禁止视频和音频的自动播放)

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

需得动态设置src才能实现

// 动态设置src
this.player.src([
  {
   src: nowPlayVideoUrl,
   type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
  }
 ]);

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

yarn add mux.js

五、 播放rtmp流

播放rtmp流的操作与播放hls流的操作几乎相同,不同在于:

import "videojs-flash"; // 播放rtmp流需要的插件
type: 'rtmp/flv', // 这个type值必写, 告诉videojs这是一个rtmp流视频

以上就是如何在vue中使用video.js 播放m3u8格式的视频的详细内容,更多关于vue 使用videojs 播放m3u8格式的视频的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
详解Vue的options
May 15 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
vue-video-player 断点续播的实现
Feb 01 #Vue.js
Vite和Vue CLI的优劣
Jan 30 #Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 #Vue.js
vue监听键盘事件的相关总结
Jan 29 #Vue.js
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
vue 项目@change多个参数传值多个事件的操作
Jan 29 #Vue.js
You might like
SONY ICF-SW7600的电路分析
2021/03/02 无线电
php set_time_limit()函数的使用详解
2013/06/05 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
php多重接口的实现方法
2015/06/20 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
jQuery循环遍历子节点并获取值的方法
2016/04/14 Javascript
jQuery 如何给Carousel插件添加新的功能
2016/04/18 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[01:05:29]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第二场 1月24日
2021/03/11 DOTA
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Python使用20行代码实现微信聊天机器人
2020/06/05 Python
python 解决函数返回return的问题
2020/12/05 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
巴西家用小家电购物网站:Polishop
2016/08/07 全球购物
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
钢琴师观后感
2015/06/12 职场文书
提档介绍信范文
2015/10/22 职场文书
nginx中proxy_pass各种用法详解
2021/11/07 Servers