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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
基于jquery的tab切换 js原理
Apr 01 Javascript
js 小数取整的函数
May 10 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
js和jquery中获取非行间样式
May 05 jQuery
详解javascript函数写法大全
Mar 25 Javascript
vue+elementUI实现表格关键字筛选高亮
Oct 26 Javascript
vue3.0 上手体验
Sep 21 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开发模式(简写版)
2007/03/15 PHP
php str_pad 函数用法简介
2009/07/11 PHP
php中判断数组是一维,二维,还是多维的解决方法
2013/05/04 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
php简单实现数组分页的方法
2016/04/30 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
基于jquery实现弹幕效果
2016/09/29 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
Python实现识别手写数字大纲
2018/01/29 Python
Python检测网络延迟的代码
2018/05/15 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
python操作链表的示例代码
2020/09/27 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
python实现感知机模型的示例
2020/09/30 Python
Python如何急速下载第三方库详解
2020/11/02 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
介绍一下except的用法和作用
2015/01/22 面试题