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客户端解决方案 缓存提供程序
Jul 14 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 Javascript
jQuery中parentsUntil()方法用法实例
Jan 07 Javascript
Flash图片上传组件 swfupload使用指南
Mar 14 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 Javascript
javascript实现考勤日历功能
Nov 29 Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
原生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保存session到memcache服务器的方法
2016/01/19 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
jquery 输入框数字限制插件
2009/11/10 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
使用AngularJS创建自定义的过滤器的方法
2015/06/18 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python 基于opencv 实现一个鼠标绘图小程序
2020/12/11 Python
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
Servlet的生命周期
2013/08/25 面试题
小学生开学感言
2014/02/28 职场文书
学校党支部承诺书
2015/04/30 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记