vediojs 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="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>

vediojs m3u8 视频清晰度切换相关推荐

Video.js中m3u8视频清晰度切换
原文地址:http://blog.csdn.net/chenyongtu110/article/details/77181081 完成测试代码 <!DOCTYPE HTML> <ht ...
软件工程应用与实践（8）——视频清晰度切换
2021SC@SDUSC 文章目录一.概述二.代码分析 2.1 安装配置 2.2 播放器的创建 2.3 应用三.总结一.概述在老年健康管理系统中,需要播放相应的视频,在播放视频的过程中,需要 ...
m3u8.php怎么调用,怎样使用Vue结合Video.js播放m3u8视频
这次给大家带来怎样使用Vue结合Video.js播放m3u8视频,使用Vue结合Video.js播放m3u8视频的注意事项有哪些,下面就是实战案例,一起来看一下. 首先,我们需要在vue工程中安装vi ...
html5视频播放器代码实例(含倍速、清晰度切换、续播)
本文将对视频播放相关的功能进行说明(基于云平台),包括初始化播放器.播放器尺寸设置.视频切换.倍速切换.视频预览.自定义视频播放的开始/结束时间.禁止拖拽进度.播放器皮肤.控件按钮以及播放控制等. ...
php视频降清晰度,HTML5视频播放器-video-js（带清晰度切换） | 小灰灰博客
body { background-color: #000; margin-left: 0px; margin-top: 0px; } 视频播放器 var isWap = navigator.user ...
视频播放器倍速、清晰度切换、m3u8下载
视频上很容易就可以做到倍速播放,一般的视频格式都是每秒固定的帧数,按比例跳帧就可以了.音频上其实也可以用这种方式来直接删除一些周期,因为电脑里的音频也是数字化离散化地储存的.但是为了使声音不失真,应该 ...
html5视频画质清晰度切换和倍速播放切换代码参考
阿酷TONY / 原创 / 2022-11-10 / 长沙 / 2022-11-11 / html5视频播放器如何实现[视频画质清晰度切换]和[倍速播放切换]? html5视频画质清晰度切换切 ...
使用python下载加密的流媒体m3u8视频文件，获取电影资源
使用python下载加密的流媒体m3u8视频文件,获取电影资源 m3u8简介代码示例获取文件名与m3u8地址媒体序列解密视频序列片段下载完整代码后记 m3u8简介 M3U8是Unicode ...
萤石云视频直播切换出现no source found in video tag.的问题解决方法
使用套件以及业务说明:在使用海康萤石云的轻应用-视频开发套件的时候,根据公司需要,需要根据不同的直播地址在页面点击按钮切换直播的显示,效果图如下.前端框架用的是Layui 问题描述:在点击切换按钮的时 ...

vediojs m3u8 视频清晰度切换

vediojs m3u8 视频清晰度切换相关推荐

最新文章

热门文章