如何在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 +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
vue中activated的用法
Jan 03 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 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
生成sessionid和随机密码的例子
2006/10/09 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
2016/02/19 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python向excel中写入数据的方法
2019/05/05 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
详解python os.path.exists判断文件或文件夹是否存在
2020/11/16 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
教你打造完美的创业计划书
2014/01/06 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015年入党积极分子评语
2015/03/26 职场文书
学风建设主题班会
2015/08/17 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
Java死锁的排查
2022/05/11 Java/Android