[HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls
DEMO地址:https://github.com/Tinywan/PHP_Experience
https://github.com/videojs/videojs-contrib-hls
下载JS文件,直接使用
<video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls><sourcesrc="https://example.com/index.m3u8"type="application/x-mpegURL"> </video> <script src="video.js"></script> <script src="videojs-contrib-hls.min.js"></script> <script> var player = videojs('example-video'); player.play(); </script>
videojs-contrib-hls支持一堆HLS功能。以下是一些亮点:
- 视频点播和实况播放模式
- 备份或冗余流
- 中段质量切换
- AES-128段加密
- CEA-608字幕会自动翻译成标准的HTML5 标题文字曲目
- In-Manifest WebVTT字幕自动翻译成标准的HTML5字幕轨道
- 定时ID3元数据将自动翻译成HTML5 metedata文本轨道
- 高度可定制的自适应比特率选择
- 自动带宽跟踪
- 使用CORS支持跨域凭据
- 与video.js的紧密集成以及使用标准HTML API尽可能多地展现的理念
- 流多个音轨并切换到那些音轨(参见docs文件夹)获取信息
- 片段MP4 中的媒体内容, 而不是MPEG2-TS容器格式。
方法:
获取对象
var videoObj = videojs(“videoId”);
ready:
myPlayer.ready(function(){//在回调函数中,this代表当前播放器,//可以调用方法,也可以绑定事件。
})
播放:
myPlayer.play();
暂停:
myPlayer.pause();
获取播放进度:
var whereYouAt = myPlayer.currentTime();
设置播放进度:
myPlayer.currentTime(120);
视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效
var howLongIsThis = myPlayer.duration();
缓冲,就是返回下载了多少
var whatHasBeenBuffered = myPlayer.buffered();
百分比的缓冲
var howMuchIsDownloaded = myPlayer.bufferedPercent();
声音大小(0-1之间)
var howLoudIsIt = myPlayer.volume();
设置声音大小
myPlayer.volume(0.5);
取得视频的宽度
var howWideIsIt = myPlayer.width();
设置宽度:
myPlayer.width(640);
获取高度
var howTallIsIt = myPlayer.height();
设置高度:
myPlayer.height(480);
一步到位的设置大小:
myPlayer.size(640,480);
全屏
myPlayer.enterFullScreen();
离开全屏
myPlayer.enterFullScreen();
添加事件
durationchange
ended //播放结束
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause //暂停
play //播放
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inheritedvar myFunc = function(){
// Do something when the event is fired
};
事件绑定
myPlayer.on("ended", function(){console.log("end", this.currentTime());
});
myPlayer.on("pause", function(){console.log("pause")
});
删除事件
myPlayer.removeEvent(“eventName”, myFunc);
虽然文章说明在不支持html5的情况下,会以flash播放,但在支持html5的firefox下播放mp4时,却遇到很大的困难,虽然调用了flash,但一直无法播放(不过我也一直怀疑我的firefox下的flash有问题,不知道是不是真的)。不过如果你听从videojs的建议,放两个格式的视频,就不会有这个问题了。
另外video的写法中还有专门针对flash的写法,当然你也可以用这个插件实现纯粹的flash播放(只写flash那部分就好,可以保证统一的浏览效果,不过iOS的浏览器不兼容flash,这就要你自己进行判断来处理
选项参数设置
如何使用,初始化
您可以在播放器初始化时将选项对象传递给hls源处理程序。你可以像你对video.js的其他部分一样传递选项:
// html5 for html hls videojs(video, {html5: {hls: {withCredentials: true} }});// or// flash for flash hls videojs(video, {flash: {hls: {withCredentials: true} }});// orvar options = {hls: {withCredentials: true; }};videojs(video, {flash: options, html5: options});
资源
一些选项,例如withCredentials
可以传递给hls player.src
var player = videojs('some-video-id');player.src({src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',type: 'application/x-mpegURL',withCredentials: true });
直接改变URL地址:
$(function () {$("#form_button").click(function () {var msg = $("#msg");stream_address = $('input[name="stream_address"] ').val();console.log(stream_address);if (stream_address == "") {$('#stream_address ').css("border", "1px #ff0000 solid");msg.text("请输入媒体流地址");msg.addClass("warning");return false;} else {$('#stream_address').css("border", "1px #ff00ff solid");msg.text("error");msg.removeClass("warning");}$('#stream_address_code ').html("\"" + stream_address + "\""); player.src({src:stream_address,type:"application/x-mpegURL"});});});
遇到的BUB、错误、解决方案!
The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://127.0.0.1
Nginx 配置文件修改跨域:
location /record {add_header Cache-Control no-cache;add_header 'Access-Control-Allow-Origin' '*' always;add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';add_header 'Access-Control-Allow-Headers' 'Range';types{application/dash+xml mpd;application/vnd.apple.mpegurl m3u8;video/mp2t ts;}alias /home/tinywan/video_recordings; }
[HTML5和Flash视频播放器]Video.js 学习笔记(一 ) HLS库:videojs-contrib-hls相关推荐
- 免费视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/6689179.html Video.js是一款web视频播放器,支持html5和flash两种播放方式.更多关于video.j ...
- 开源视频播放器Video.js介绍
原文地址:http://www.cnblogs.com/afrog/p/4115377.html 最近项目中的视频功能,需要做到浏览器全兼容,所以之前用html5实现的视频功能就需要进行改造了.在网上 ...
- java flash 播放器_视频播放插件Video.js
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.(要支持 ...
- html 在线播放器,HTML5 Web播放器-Video.js
原标题:HTML5 Web播放器-Video.js Video.js是一款优秀的HTML5 Web视频播放器.它同时支持 HTM5 和 Flash 视频,支持在桌面和移动设备上的视频播放,截至目前,大 ...
- html5 无插件视频播放器,多功能流媒体播放器网页无插件直播EasyPlayer.js如何实现播放完自动循环播放...
原标题:多功能流媒体播放器网页无插件直播EasyPlayer.js如何实现播放完自动循环播放 EasyPlayer-Android播放器是一款可针对RTSP.RTMP.RTSP&RTMP协议进 ...
- html5视频播放器video player 选择
为什么80%的码农都做不了架构师?>>> 网上能找到的好的支持html5的视频播放器非常有限,研究了几个还可以的,发现都有这样或者那样的问题,不是不给源代码,就是不支持全屏播放,要么 ...
- php网页视频播放插件下载_视频播放插件Video.js
插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器.(要支持 ...
- 视频播放插件 Video.js 使用和个版本下载
来源:https://blog.csdn.net/zhanghao143lina/article/details/79457035 Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,V ...
- 视频播放插件(video.js)
一.视频播放插件 1.插件描述:Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Fla ...
- html原生音频播放器倍速,HTML5倍数功能视频播放器(加速2倍,1.5倍播放)
HTML5倍数功能视频播放器(加速2倍,1.5倍播放) 倍数功能视频播放器的应用: 培训场景,教育教学场景下,可以倍速观看视频,比如1.5倍,2倍的速度观看视频,可以更快速的看完课程,节省时间. va ...
最新文章
- 2021.01.29 Visual QA论文阅读
- 作为医生,除了买花,还能在情人节用什么特别的方式表白呢?(情书-病历体)...
- 通过vsphere client创建虚拟机并且安装windows 2008 64位操作系统及网络配置
- 用html5做淡出淡入效果,在Html5 canvas中淡入淡出
- python中for、while循环、if嵌套的使用
- JavaScript使用正则表达
- 软考倒计时27天:信息系统集成专业技术知识
- Eclipse中代码自动提示功能设置
- STM32 PWM呼吸灯程序
- 全球及中国熔融碳酸盐燃料电池行业市场消费量调研及未来前瞻报告2022-2028年
- Android与iPhone的对比
- 答案原文翻译解释《避凶就吉精明鬼,千变万化心不变》这句话是指什么意思?...
- [转] 使用CPN Tools工具做简单的登录模型()
- VTK错误解决合集(持续更新中......)
- coso js 魔窗
- Android系统手机开机画面各个阶段代码执行流程分析(Part2)
- 微信支付APP支付完全攻略
- Linux安装RPM包、查看本机ip和端口、手动配置ip、中标麒麟无法显示ip地址的详细解决方法
- 苹果发布新教育计划Apple School Manager
- 记:无人驾驶GPS循迹问题
热门文章
- .NET程序员面试指南:解释委托的基本原理
- 3分钟tips:协方差和相关系数的异同
- Makefile自动生成:cmake
- python3.6.2安装pip_centos7 安装pip+python3.6以及pip安装错误解决办法
- oracle如何查找谁删除了数据_一文看懂Oracle是如何闪回数据库的?
- static变量会被垃圾回收吗_废泡沫塑料属于哪种垃圾?废泡沫塑料是可回收垃圾吗?...
- 二叉树的遍历-C++
- Android Studio 导入项目时容易出现的问题汇总
- Linux(Fedora 20) EFI 启动Windows出错 \EFI\Microsoft\Boot\bootmgfw.efi is missing
- Daily Scrum 9.26