Video.js中m3u8视频清晰度切换

2024-03-13 04:18

本文主要是介绍Video.js中m3u8视频清晰度切换,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文地址:http://blog.csdn.net/chenyongtu110/article/details/77181081

完成测试代码 

<!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="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.οnlοad=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"  οnclick="changeVideo(1)">普通</li>'  + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  οnclick="changeVideo(2)">标清 </li>'  + '<li class="vjs-menu-item" tabindex="-1" role="menuitemcheckbox"  οnclick="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中m3u8视频清晰度切换的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/803617

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

流媒体平台/视频监控/安防视频汇聚EasyCVR播放暂停后视频画面黑屏是什么原因?

视频智能分析/视频监控/安防监控综合管理系统EasyCVR视频汇聚融合平台,是TSINGSEE青犀视频垂直深耕音视频流媒体技术、AI智能技术领域的杰出成果。该平台以其强大的视频处理、汇聚与融合能力,在构建全栈视频监控系统中展现出了独特的优势。视频监控管理系统EasyCVR平台内置了强大的视频解码、转码、压缩等技术,能够处理多种视频流格式,并以多种格式(RTMP、RTSP、HTTP-FLV、WebS

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

《x86汇编语言:从实模式到保护模式》视频来了

《x86汇编语言:从实模式到保护模式》视频来了 很多朋友留言,说我的专栏《x86汇编语言:从实模式到保护模式》写得很详细,还有的朋友希望我能写得更细,最好是覆盖全书的所有章节。 毕竟我不是作者,只有作者的解读才是最权威的。 当初我学习这本书的时候,只能靠自己摸索,网上搜不到什么好资源。 如果你正在学这本书或者汇编语言,那你有福气了。 本书作者李忠老师,以此书为蓝本,录制了全套视频。 试

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

MyBatis 切换不同的类型数据库方案

下属案例例当前结合SpringBoot 配置进行讲解。 背景: 实现一个工程里面在部署阶段支持切换不同类型数据库支持。 方案一 数据源配置 关键代码(是什么数据库,该怎么配就怎么配) spring:datasource:name: test# 使用druid数据源type: com.alibaba.druid.pool.DruidDataSource# @需要修改 数据库连接及驱动u