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 相关文章推荐
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
javascript返回顶部效果(自写代码)
Jan 06 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
JS指定音频audio在某个时间点进行播放
Nov 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
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
javascript跨浏览器的属性判断方法
2014/03/16 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
[32:47]完美世界DOTA2联赛 GXR vs IO 第二场 11.07
2020/11/09 DOTA
python正则表达式面试题解答
2020/04/28 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python时间和字符串转换操作实例分析
2019/03/16 Python
Python测试模块doctest使用解析
2019/08/10 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
python3 mmh3安装及使用方法
2019/10/09 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Kathmandu英国网站:新西兰户外运动品牌
2017/03/27 全球购物
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
学生违反校规检讨书
2014/10/28 职场文书
摘录式读书笔记
2015/07/01 职场文书
六一儿童节致辞稿(3篇)
2019/07/11 职场文书
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL