如何在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 + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue动态合并单元格并添加小计合计功能示例
Nov 26 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
如何管理Vue中的缓存页面
Feb 06 Vue.js
详解vue3中组件的非兼容变更
Mar 03 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
vue3获取当前路由地址
Feb 18 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
PHP JSON 数据解析代码
2010/05/26 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
php调用方法mssql_fetch_row、mssql_fetch_array、mssql_fetch_assoc和mssql_fetch_objcect读取数据的区别
2012/08/08 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
JS中类或对象的定义说明
2014/03/10 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
原生JS实现在线问卷调查投票特效
2017/01/03 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
使用js获取身份证年龄的示例代码
2020/12/11 Javascript
Python基于twisted实现简单的web服务器
2014/09/29 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
python修改字典键(key)的方法
2019/08/05 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
实列教程 一款基于jquery和css3的响应式二级导航菜单
2014/11/13 HTML / CSS
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
经典团队口号
2014/06/06 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
活动经费申请报告
2015/05/15 职场文书
党员身份证明材料
2015/06/19 职场文书
六年级语文教学反思
2016/03/03 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL