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 相关文章推荐
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
JS+canvas画一个圆锥实例代码
Dec 13 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
vue实现简易的双向数据绑定
Dec 29 Vue.js
JS实现扫雷项目总结
May 19 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 XPath对XML文件查找及修改实现代码
2011/07/27 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
Js四则运算函数代码
2012/07/21 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
原生js实现each方法实例代码详解
2019/05/27 Javascript
Vue.js中的组件系统
2019/05/30 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
利用python计算windows全盘文件md5值的脚本
2019/07/27 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
如何验证python安装成功
2020/07/06 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
个人简历自我评价
2014/02/02 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
小学新课改心得体会
2016/01/22 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js
无线电通信名词解释
2022/02/18 无线电
【海涛dota】偶遇拉娜娅 质量局德鲁伊第一视角解说
2022/04/01 DOTA