Vue结合Video.js播放m3u8视频流的方法示例


Posted in Javascript onMay 04, 2018

首先,我们需要在vue工程中安装video.js相关依赖。

npm install --save video.js
npm install --save videojs-contrib-hls

然后,我们需要引入videojs的css文件,例如在main.js中引入

import 'video.js/dist/video-js.css'

接着,我们在需要播放视频的页面引入js对象

import videojs from 'video.js'
import 'videojs-contrib-hls'

指定一个video容器,例如:

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png">
 <source src="http://127.0.0.1:7086/aaa/213/stream/1.m3u8" type="application/x-mpegURL">
</video>

最后,我们在mounted节点初始化播放器:

videojs('my-video', {
 bigPlayButton: false,
 textTrackDisplay: false,
 posterImage: true,
 errorDisplay: false,
 controlBar: true
}, function () {
 this.play()
})

Video.js中m3u8视频清晰度切换

完成测试代码 

<!DOCTYPE HTML> 
<html> 
<head> 
 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
 <title>视频控制</title> 
 <link href="https://unpkg.com/video.js/dist/video-js.css" rel="external nofollow" rel="stylesheet"> 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script> 
 <script src="https://unpkg.com/video.js/dist/video.js"></script> 
 <script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script> 
</head>  
<body> 
 <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268"  
 data-setup='{}'> 
 <source src="http://localhost/video/c/1928.m3u8" type="application/x-mpegURL"> 
 </video> 
<br/>  
</body>  
<script type="text/javascript">  
 window.onload=function(){   
 var videoPanelMenu = $(".vjs-fullscreen-control"); 
  videoPanelMenu.before('<div class="vjs-subs-caps-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button" aria-live="polite" aria-expanded="false" aria-haspopup="true">' 
  + '<div class="vjs-menu" role="presentation">' 
  + '<ul class="vjs-menu-content" role="menu">' 
  + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(1)">普通</li>' 
  + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(2)">标清 </li>' 
  + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox" onclick="changeVideo(3)">高清 </li>' 
  + '</ul></div>' 
  +' <button class="vjs-subs-caps-button vjs-control vjs-button" type="button" aria-live="polite" title="清晰度切换" aria-disabled="false">' 
  +'  <span aria-hidden="true" class="vjs-icon-placeholder"></span><span class="vjs-control-text">清晰度切换</span>' 
  +' </button>' 
  +'</div>' 
  ); 
   
 var obj={tag:false,ctime:0}; 
 window.obj=obj; 
 var myPlayer=videojs.getPlayers()['my_video_1']; 
  myPlayer.on("timeupdate", function(){ 
    if(window.obj.tag){ 
   videojs("my_video_1").currentTime(window.obj.ctime) 
   videojs("my_video_1").play(); 
   window.obj.tag=false; 
  } 
   
  //视频打点 
  var ctime_=videojs("my_video_1").currentTime().currentTime(); 
  if(ctime_==60){ 
   videojs("my_video_1").currentTime(ctime_+1); 
   //do something 
  }  
 });  
} 
 
 function changeVideo(type){ 
  var ctime=videojs("my_video_1").currentTime();  
  if(type==1){ 
  videojs("my_video_1").src([{type: "application/x-mpegURL", src: "http://localhost/video/LD/1928.m3u8" }]); 
  videojs("my_video_1").play();  
  } 
  if(type==2){ 
  videojs("my_video_1").src([{type: "application/x-mpegURL", src: "http://localhost/video/C/1928.m3u8" }]);  
  videojs("my_video_1").play(); 
 
  } 
  if(type==3){ 
  videojs("my_video_1").src([{type: "application/x-mpegURL", src: "http://localhost/video/HD/1928.m3u8" }]);  
  videojs("my_video_1").play(); 
  } 
  window.obj.ctime=ctime; 
  window.obj.tag=true; 
 } 
 </script> 
</html>

以上就是如题最简单的实现,更多需求请自行阅读video.js相关api或者持续关注。也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初学Javascript的一些总结
Nov 03 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 11 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 #Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 #Javascript
vue裁切预览组件功能的实现步骤
May 04 #Javascript
详解vue组件基础
May 04 #Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 #Javascript
[原创]jquery判断元素内容是否为空的方法
May 04 #jQuery
Vue.js 踩坑记之双向绑定
May 03 #Javascript
You might like
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
javascript不同类型数据之间的运算的转换方法
2014/02/13 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
基于JavaScript实现右键菜单和拖拽功能
2016/11/28 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
安装dbus-python的简要教程
2015/05/05 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
初入社会应届生求职信
2013/11/18 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
教师求职信怎么写
2015/03/20 职场文书
常住证明范本
2015/06/23 职场文书
2015迎新晚会活动总结
2015/07/16 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers
python通过新建环境安装tfx的问题
2022/05/20 Python