工具系列 | H5自定义视频播放器实现
前言
目前，只是对自定义视频播放器的初步实现，之后会逐步完善!
一、H5视频、声频常用方法
1.canPlayType(); 检查浏览器是否能够播放指定的视频、声频。
使用canPlayType()方法检查浏览器是否能够播放指定的视频、声频。canPlayType()方法能够返回以下值：
- “probably” : 浏览器最有可能支持视频的类型
- “maybe” : 浏览器或许能够支持视频的类型
- “ “ : 空字符，浏览器不支持视频的类型
值 |
说明 |
|---|---|
type |
指定视频的种类以及解码器。常用值如下：video/mp4video/oggvideo/webm同时指定常用值及解码器：video/ogg; |
JavaScript 语法 |
audio/video.canPlayType(kind,label,language); |
2.load();加载视频、声频元素
使用load()方法重新加载视频元素。load()方法通常用于给video元素加载或设置新的媒体数据。
3.play();播放媒体数据
使用play()方法播放当前视频。该方法通常与pause()方法一起使用，实现播放和暂停功能。使用controls属性显示视频的操作界面（界面上通常包括播放、暂停、滑动条、音量等）。
4.pause();暂停媒体数据
使用pause()方法暂停当前视频。该方法通常与play()方法一起使用，实现播放和暂停功能。使用controls属性显示视频的操作界面（界面上通常包括播放、暂停、滑动条、音量等）。
二、H5视频、声频常用属性
1.autoplay属性 自动播放
使用autoplay属性，当视频播放准备工作一旦完成，视频马上播放。
值 |
说明 |
|---|---|
true |
打开网页，视频自动播放，设置方法：autoplay=true，这时返回true |
false |
打开网页，视频不自动播放，设置方法：autoplay=false，这时返回false。默认值 |
JavaScript 语法 |
audio/video.autoplay=true/false; |
2.buffered属性返回声频、视频的缓冲信息
使用buffered属性，返回TimeTanges事件，从TimeTanges事件中可以获得视频、声频的缓冲信息。
在TimeTanges事件中，针对完成缓冲的部分，有表示开始点的start属性和结束点的end属性，与currentTime相同， 容纳了以秒计算的实数值。
值 |
说明 |
|---|---|
TimeRanges事件 |
表示声频、视频的缓冲范围；TimeTanges事件的属性：length:获取声频、视频的缓冲长度；start(index):获取缓冲范围的开始点；end(index):获取缓冲范围的结束点注：矩阵的起始序号为0。 |
JavaScript 语法 |
audio/video.buffered; |
3.controls属性 设置或返回视频、声频用户界面
使用controls属性设置或返回能够操作视频、声频播放或停止的用户标准界面。
用户标准界面的构成：
- 播放
- 暂停
- 播放滑条
- 音量
- 满屏切换（视频）
- 字幕切换（如果可用）
- 字幕轨道（如果可用）
注：使用controls属性设置或返回视频是否带有基本用户操作界面。
值 |
说明 |
|---|---|
true |
设定用户界面显示 |
false |
设定用户界面不显示 |
JavaScript 语法 |
audio/video.controls=true/false;默认值：false |
4.currentSrc属性 返回当前视频、声频的URL
使用currentSrc属性返回当前视频、声频的URL。如果没有视频或声频安装，将返回空字符。
该属性为只读属性。使用src属性设置视频文件。
返回的值 |
说明 |
|---|---|
返回的值 |
一串字符，即：当前视频、声频的ＵＲＬ。返回完整的ＵＲＬ，包括协议（如： http://）， 如果没有设置媒体文件，将返回空字符。 |
false |
设定用户界面不显示 |
JavaScript 语法 |
audio/video.currentSrc |
5.currentTime属性 设置或返回视频、声频的当前播放位置
使用currentTime属性设置或返回视频、声频的当前播放位置（以秒计算）。如果设置了该属性，将跳至被指定的位置开始 播放。
值 |
说明 |
|---|---|
秒（seconds） |
使用秒指定声频、视频的播放位置 |
返回的值 |
一个数值，当前的播放时间（以秒计算） |
JavaScript 语法 |
audio/video.currentTime=“seconds” |
6.duration属性 返回当前视频、声频的长度（以秒计算）
使用duration属性返回当前视频、声频的长度（以秒计算）。如果没有设置声频、视频文件，将返回NaN(Not-a-Number)。
注：该属性为只读属性。
值 |
说明 |
|---|---|
返回值 |
数值，指定的视频的长度，以秒计算。如果没有设置视频，将返回“NaN”（Not-a-Number）。如果只是视频流，没有预定的长度时，将返回 “Inf”（Infinity）。 |
JavaScript 语法 |
audio/video.duration |
7.ended属性 返回视频、声频是否播放完毕
使用ended属性返回视频、声频是否播放完毕。如果播放位置在视频、声频的结束位置，代表声频、视频 播放结束。
注：该属性为只读属性。
值 |
说明 |
|---|---|
返回值 |
布尔值，返回true：播放结束返回false：播放没有结束 |
JavaScript 语法 |
audio/video.ended |
8.loop属性 设置或返回视频、声频是否反复播放
使用loop属性，设置或返回视频、声频是否反复播放。
值 |
说明 |
|---|---|
true |
指定视频、声频反复播放 |
false |
指定视频、声频不反复播放 |
返回值 |
布尔值，如果视频、声频反复播放返回true；如果视频、声频不反复播放返回false; |
JavaScript 语法 |
audio/video.loop=true/false |
9.muted属性;设置或返回视频、声频是否静音
使用muted属性设置或返回视频、声频是否静音。muted属于逻辑属性。
值 |
说明 |
|---|---|
true |
声频、视频指定静音 |
false |
声频、视频不指定静音 |
返回值 |
布尔值；返回true时静音状态，返回false时不是静音状态。 |
JavaScript 语法 |
audio/video.muted=true/false;audio/video.muted（返回） |
10.paused属性; 返回视频、声频否是暂停
使用paused属性返回视频、声频是否是暂停。
注：该属性为只读属性。
值 |
说明 |
|---|---|
返回值 |
布尔值，返回true：声频、视频暂停；返回false：声频、视频没有暂停。 |
JavaScript 语法 |
audio/video.paused |
11.played属性 返回代表视频、声频播放部分的TimeTanges对象
使用played属性返回代表视频、声频播放部分的TimeTanges对象。播放部分是一个时间段， 用户可以获得多个即时播放时间段。
在TimeTanges事件中，针对播放完毕的部分，有表示开始点的start属性和结束点的end属性，与currentTime相同， 容纳了以秒计算的实数值。start与end是以矩阵的形式存在的。
注：该属性为只读属性。
值 |
说明 |
|---|---|
TimeTanges事件 |
代表媒体播放完了部分。TimeTanges事件的属性：length:获取声频、视频的播放长度；start(index):获取视频的开始点end(index):获取视频的结束点注：矩阵的起始序号为0 |
JavaScript 语法 |
audio/video.played |
12.playbackRate属性 设置或返回声频、视频的播放速度
使用playbackRate属性设置或返回声频、视频的播放速度。
值 |
说明 |
|---|---|
播放速度 |
指定当前声频、视频的播放速度。值：1.0:标准速度；0.5:半速（慢速）；2.0:双倍速度（快速）；-1.0:后退（标准速度）；-0.5:后退（半速）; |
返回值 |
数值，速度；默认值：1.0； |
JavaScript 语法 |
audio/video.playbackRate |
13.src属性 设置或返回当前声频、视频资源的URL
使用src属性返回当前视频、声频资源的URL。
值 |
说明 |
|---|---|
URL |
指定的视频、声频资源的URL。 |
字符串，视频、声频的资源文件的保存地址（URL），返回绝对路径，包括协议（如: http://） |
|
JavaScript 语法 |
audio/video.src=URLaudio/video.src(返回) |
14.volume属性 设置或安装视频、声频的音量
值 |
说明 |
|---|---|
数量 |
指定当前声频、视频的音量。值必须取0.0-1.0之间的数值，例：1.0:声音最高（100%,默认值）0.5：中音（50%）0.0:静（相当于静音） |
返回值 |
返回数值，代表当前音量 |
JavaScript 语法 |
audio/video.volume(返回)audio/video.volume=数值（设置） |
二、H5视频、声频常用属性
1.加载声频、视频过程时，能够触发的事件如下：
- 开始读入媒体数据时触发的事件(onloadstart)
- 更改声频、视频的时长时(ondurationchange)
- 浏览器已加载声频、视频的元数据时触发的事件(onloadedmetadata)
- 浏览器加载声频、视频当前帧结束后(onloadeddata)
- 浏览器正在下载媒体数据时(onprogress)
- 浏览器可以播放媒体数据时(oncanplay)
- 当浏览器可以在不因缓冲而停顿的情况下播放时(oncanplaythrough)
2.加载声频、视频时，容易受到的干扰,如下：
- 因出错而中断(abort)
- 空文件(emptied)
- 出错(onerror)
- 下载过程中，意外中断时（onstalled）
- 浏览器不获取媒体数据时(onsuspend)
3.其它事件
（1）onended事件 目前的播放列表结束时触发的事件
使用场景如：当播放结束后自动显示或提示“谢谢观看！”、“谢谢收听！”等。
（2）onpause事件 为声频、视频暂停时触发的事件
（3）onplay事件 为声频、视频开始播放时触发的事件
（4）onseeked事件 为用户改变播放位置后触发的事件
即：用户操作滑动条到新的位置时触发的事件。
（5）onseeking事件 为用户开始改变或正在改变播放位置时触发的事件
即：用户正在操作滑动条时触发的事件。
（6）ontimeupdate事件 为当前播放位置发生改变后触发的事件
该timeupdate事件经常与Audio/Video事件的currentTime属性配合使用。curentTime属性返回 Audio/Video的当前播放位置。以秒计算。
（7）onvolumechange事件 为更改了声频、视频的音量时触发的事件
（8）onwaiting事件 为视频因为需要下载下一帧而停止时触发的事件
如果系统的看过以上H5声频、音频的相关知识，那么以下栗子就可以看得懂了。
/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释
* <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><script type="text/javascript" src="js/jquery-2.2.3.min.js"></script><script type="text/javascript" src="js/remauto.js"></script><title>自定义视频播放器</title><style> .video-box{ position: relative; width: 7.5rem; height: 4.2rem; margin: 0 auto; } .video-box video{ width: 7.5rem; height: 4.2rem; } .controls-bar{ position: absolute; left:0; bottom: 0; width: 100%; height: 0.5rem; background-color: rgba(0,0,0,0.2); z-index: 999; } .progress { position: relative; float: left; width: 3rem; height: 0.06rem; background-color: #8ed1bb; -webkit-border-radius: 0.05rem; -moz-border-radius: 0.05rem; border-radius: 0.05rem; margin-top: 0.22rem; margin-left: 0.16rem; cursor: pointer; } .bar { display: inline-block; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: #fff; -webkit-border-radius: 0.05rem; -moz-border-radius: 0.05rem; border-radius: 0.05rem; } .control { position: absolute; left: -0.04rem; top: -0.04rem; width: 0.14rem; height: 0.14rem; background: #fff; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; z-index: 99; } .control:before{ content: ''; position: absolute; right: -0.04rem; top: -0.04rem; width: 0.22rem; height: 0.22rem; background: rgba(255,255,255,0.3); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .vioce{ float: left; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; font-size: 0.16rem; margin-left: 0.3rem; margin-top: 0.14rem; color: #ffffff; } .video-switch{ position: relative; float: left; width: 0.4rem; height: 0.4rem; border: 1px solid #fff; -webkit-border-radius: 0.1rem; -moz-border-radius: 0.1rem; border-radius: 0.1rem; margin: 0.05rem 0.1rem; cursor: pointer; } .switch-pause{ position: absolute; right: 0; top: 0; bottom: 0; margin: auto; width: 0; height: 0; border: 0.1rem solid transparent; border-left: 0.12rem solid #fff; } .switch-play{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 0.18rem; height: 0.18rem; border-left: 0.05rem solid #ffffff; border-right: 0.05rem solid #ffffff; } #fullScreen{ float: left; margin-top: 0.1rem; margin-left: 0.3rem; } .fullscreen-icon{ display: block; width: 0.3rem; height: 0.3rem; background: url("img/full.png") no-repeat; -webkit-background-size: 0.3rem 0.3rem; background-size: 0.3rem 0.3rem; } .video-mask{ display: none; } .controls-bar{ display: none; } .vioce input[type=range]{ width: 1.4rem; height: 0.08rem; -webkit-border-radius: 0.08rem; -moz-border-radius: 0.08rem; border-radius: 0.08rem; vertical-align: middle; } .voice-icon{ display: inline-block; width: 0.24rem; height: 0.24rem; -webkit-background-size: 0.24rem; background-size: 0.24rem; vertical-align: middle; } .voice-opened-icon{ background: url("img/voice-opened.png") no-repeat; } .voice-closed-icon{ background: url("img/voice-closed.png") no-repeat; } </style></head><body><div class="video-box"><div class="video-btn"><div class="video-mask"><i class="play-video-icon iconfont icon-bofang"></i></div></div><video autoplay><source src="perch.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">您的浏览器不支持 HTML5 video 标签。</video><div class="controls-bar"><!--开关--><div class="video-switch"><div class="switch-btn switch-play"></div></div><!--进度条--><div class="progress"><span class="bar"></span><div class="control"></div></div><!--音量--><div class="vioce"><i class="voice-icon voice-opened-icon"></i><input type="range" min="0" max="100" value="50" id="vioceControle"></div><!--全屏--><div id="fullScreen"><i class="fullscreen-icon"></i></div></div></div><script type="text/javascript"> //得到video标签对象 var myVideo = $("video")[0]; var progress = $(".progress")[0]; var bar = $(".bar")[0]; var control = $(".control")[0]; var fullScreen = document.getElementById("fullScreen"); $(".video-btn").on("click",function () { videoSwitch(); return false; }) $(".video-switch").on("click",function () { videoSwitch(); })// 开关控制 function videoSwitch() { if (myVideo.paused){ myVideo.play(); $(".video-mask").hide(); $(".switch-btn").removeClass('switch-pause').addClass('switch-play'); $(".controls-bar").hide(); } else{ myVideo.pause(); $(".video-mask").show(); $(".switch-btn").removeClass('switch-play').addClass('switch-pause'); $(".controls-bar").show(); } } // 进度条 myVideo.addEventListener("timeupdate", function() { var scales = myVideo.currentTime / myVideo.duration; bar.style.width = progress.offsetWidth * scales/100 + "rem"; control.style.left = progress.offsetWidth * scales/100 - 0.04 + "rem"; }, false); // 调节音量 var vioceControle = document.getElementById("vioceControle"); vioceControle.addEventListener("change",function () { myVideo.volume = vioceControle.value/100; })// 控制全屏 fullScreen.addEventListener('click',function () { myVideo.webkitRequestFullScreen(); })// 鼠标进入视频，控制栏的显示与隐藏控制 $(".video-box").on("mouseover",function () { $(".controls-bar").show(); }); $(".video-box").on("mouseout",function () { console.log(myVideo.paused); if(!myVideo.paused){ $(".controls-bar").hide(); } })// 设置是否静音 $(".voice-icon").on("click",function () { if(myVideo.muted) { myVideo.muted = false; $(this).removeClass("voice-closed-icon").addClass("voice-opened-icon"); } else { myVideo.muted = true; $(this).removeClass("voice-opened-icon").addClass("voice-closed-icon"); } return false; })</script></body></html>
*/但是如何使用qq浏览器看该例子的话，会发现视频控制栏还是原来的样式，并不是我们自定义的样式。
- 卷积神经网络 | 深度学习笔记1
- 【直播】我的基因组65：看看哪些基因的突变较多，哪些较少
- angular之interceptors拦截器
- js list数据 转 树状 层级 JSON，递归生成树状 层级 JSON
- jquery 图片文件转base64 显示
- AngularJS 用 $http.jsonp 跨域SyntaxError问题
- 简单的java socket 示例
- Hadoop二次开发环境构建
- Android EditText 获得输入焦点 以及requestfocus()失效的问题
- 【直播】我的基因组68：看看哪些基因的突变较多，哪些较少
- GDI+编程
- GDI编程
- ADO访问数据库
- 【直播】我的基因组76：用krona对血液全基因组的菌比例可视化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python函数——浅拷贝copy()以及深拷贝deepcopy()
- 数据结构算法操作试题(C++/Python)——两数之和
- C++核心准则T.46:要求模板参数最少是正规或半正规的
- python函数——List获取索引（多相同值解决方法）
- C++核心准则T.47:避免使用通用名称的高度不受限模板
- python函数——字符串字母大小判断
- Day 6:旋转数组的最小数字
- MapReduce工作笔记——yarn reducer 内存溢出 beyond physical memory limits
- Linux实用技巧——find查找指定时间内修改过的文件或目录
- 数据结构算法操作试题(C++/Python)——最接近的三数之和
- 数据结构算法操作试题(C++/Python)——字符串转换整数 (atoi)
- 数据结构算法操作试题(C++/Python)——电话号码的字母组合
- 数据结构算法操作试题(C++/Python)——删除链表的倒数第N个节点
- Day 7:斐波那契数列
- Day8 :跳台阶