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


猜你喜欢
- 在同一个局域网的多台电脑,传递文件时可以通过 搭建web服务器,设置目录浏览的方式快速分享。如果上传就比较麻烦了,通过QQ/微信会产生很多文
- 前言:在fastapi中,我们定义的查询参数是可以设置成:必选参数 or 可选参数。可选查询参数只要给查询参数的默认值设置为None,表示该
- 阅读上一篇:定义网页的语言编码 用web标准设计网站,过渡的方法主要是采用XHTML+CSS,css样式表是必不可少的。这就要求所有网页设计
- 在我们武汉的一个项目中,用户提供的数据库服务器有16G左右的内存,但我们只能使用8G多的内存,为了提高内存的得用率,特意参考了一些资料,得出
- 本文为大家分享了Python3实现发送QQ邮件功能:html,供大家参考,具体内容如下之前已经成功发送了qq邮件。下面贴出html格式的qq
- ktime 开始时间串 dtime 到期时间串 jmonth 付费间隔月份数 可选(1,3,6,12) 需要 按月查询数据 比如说 ktim
- python 容器总结整理list可变数组tuple不可变数组dict键值对(key-value)的字典(dictionary)初始化:a=
- 1.初探刚开始接触go时,以为import自定义包与Java工程类似,在非GOPATH的路径中新建了一个go项目HelloGo,如下:接下来
- 以下是IE7中新支持的属性:min-height,max-height,min-width,max-width这个hack还可以使最大高度兼
- 本文为大家分享了Python实现批量压缩图片的具体代码,供大家参考,具体内容如下# -*- coding: utf-8 -*- "
- 1 以下代码的输出结果为:print(round(-3.6))A.-4B.-4.0C.-3D. -3.02 以下代码的输出结果为(Pytho
- channel单纯地将函数并发执行是没有意义的。函数与函数间需要交换数据才能体现并发执行函数的意义。虽然可以使用共享内存进行数据交换,但是共
- 游戏截图动态演示源码分享state/tool.pyimport osimport jsonfrom abc import abstractm
- 一、字符串(str)字符串转换为列表使用list()方法str_1 = "1235"str_2 = 'zhang
- Python 包含6种数据类型,其中Number(数字)、String(字符串)、Tuple(元组)、List(列表)、Dictionary
- 本文实例为大家分享了vue+axios+java实现文件上传的具体代码,供大家参考,具体内容如下背景vue.js + axios + ele
- 方法一: 代码如下:id=request.form("checkbox") id=Split(id,"
- 编译原理老师要求写一个java的词法分析器,想了想决定用python写一个。目标能识别出变量,数字,运算符,界符和关键字,用excel表打印
- 本文介绍了目前6种比较常用的进度条,让大家都能直观地看到脚本运行最新的进展情况1.普通进度条在代码迭代运行中可以自己进行统计计算,并使用格式
- 1、创建项目打开pycharm 终端,输入如下,创建项目# 进入pycharm 项目目录下cd pyWebdjango-admin star