Vue结合Video.js播放m3u8视频流的方法示例
作者:典藏天下 发布时间:2023-07-02 16:55:40
标签:Vue,m3u8,视频流
首先,我们需要在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>
来源:https://my.oschina.net/u/3263153/blog/1805378
0
投稿
猜你喜欢
- 本文实例为大家分享了python树莓派红外反射传感器的程序,供大家参考,具体内容如下1、工具rpi3,微雪ARPI600,Infrared
- 前言最近接到个任务是抽取mysql和Oracle的元数据,大致就是在库里把库、schema、表、字段、分区、索引、主键等信息抽取出来,然后导
- 目前lnmp一键安装包比较多的问题就是502 Bad Gateway,大部分情况下原因是在安装php前,脚本中某些lib包可能没有安装上,造
- 最近发现Python课器做很多事情,在监控服务器有其独特的优势,耗费资源少,开发周期短。首先我们做一个定时或者实时脚本timedtask.p
- 1、判断请求头来进行反爬这是很早期的网站进行的反爬方式User-Agent 用户代理referer 请求来自哪里cookie 也可以用来做访
- 在部署一套内网测试环境时,频繁宕机,开机后不断的吃内存,重启apache之后内存占用会不停的上涨,直到swap用完,直到死机,由于是内网环境
- ASP如何分两段读取数据库?中间插入广告。代码如下:<!--#include file="conn.asp"--&
- 说下防止PHPDDOS发包的方法 if (eregi("ddos-udp",$read)) { fputs($verbi
- 我是在做行人检测中需要将一段视频变为图片数据集,然后想将视频每秒钟的图片提取出来。语言:python所需要的库:cv2,numpy (自行安
- 前言之前学习过binarytree第三方库,了解了它定义的各种基本用法。昨天在问答频道中做题时碰到一个关于二叉树的算法填空题,感觉代码不错非
- 工作中最常见的配置文件有四种:普通key=value的配置文件、Json格式的配置文件、HTML格式的配置文件以及YMAML配置文件。这其中
- 在docker中安装mysqlubuntu官方镜像是精简的ubuntu系统,很多软件和库没有安装,所以直接安装mysql的话依赖较多,建议直
- 这是一款非常轻量级的纯原生JS的瀑布流插件——Macy.js,如今图片和视频网站非常多,非常适应瀑布流这样的布局方式来呈现给用户。这款流布局
- 如提取第1行,第2列的值:df.iloc[[0],[1]]则会返回一个df,即有字段名和行号。如果用values属性取值:df.iloc[[
- 调用Windows API锁定计算机本来想用Python32直接调用,可是没有发现Python32有Windows API LockWork
- 本文实例讲述了Python挑选文件夹里宽大于300图片的方法。分享给大家供大家参考。具体分析如下:这段代码需要用到PIL库。代码如下所示:i
- 首先我们要在邮箱的设置中开通那个POP3然后我们要导入这些包import poplibfrom datetime import dateti
- 前言可选链操作符(?.)允许读取位于链接对象链身处的属性的值,而不必明确验证链中的每个引用是否有效。不同之处在于,在引用为空(null或者u
- 再写入数据库对时间进行加减操作时候django报告了错误TypeError: can't subtract offset-naive
- subprocess官方中文文档介绍参考文档,我的直观感受和实际用法是:subprocess可以开启一个子进程来运行cmd命令。那就意味着可