自定义基于HTML5的video播放器—Customize your video player
HTML5提供有新的video标签，可以不用编程直接播放video，只需要写几行简单的代码，如实现以下效果（带有control panel）
只需要写如下代码：
<body style="background-color:#8EEE5EE;"> <div id="big_wrapper"><video src="Introduction.mp4" width="640" height="360" poster= "images/me.jpg" loop controls></video> <!--autoplay和poster="images/me.jpg"一般不同时使用，controls是出现控制栏--></div> </body>
Method
| 方法method | 描述description |
|---|---|
| addTextTrack() | 为音视频加入一个新的文本轨迹 |
| canPlayType() | 检查指定的音视频格式是否得到支持 |
| load() | 重新加载音视频标签 |
| play() | 播放音视频 |
| pause() | 暂停播放当前的音视频 |
properties
| 属性 | 描述description |
|---|---|
| audioTracks | 返回可用的音轨列表（MultipleTrackList对象） |
| autoplay | 媒体加载后自动播放 |
| buffered | 返回缓冲部件的时间范围(TimeRanges对象) |
| controller | 返回当前的媒体控制器（MediaController对象） |
| controls | 显示播控控件 |
| crossOrigin | CORS设置 |
| currentSrc | 返回当前媒体的URL |
| currentTime | 当前播放的时间，单位秒 |
| defaultMuted | 缺省是否静音 |
| defaultPlaybackRate | 播控的缺省倍速 |
| duration | 返回媒体的播放总时长，单位秒 |
| ended | 返回当前播放是否结束标志 |
| error | 返回当前播放的错误状态 |
| initialTime | 返回初始播放的位置 |
| loop | 是否循环播放 |
| mediaGroup | 当前音视频所属媒体组 (用来链接多个音视频标签) |
| muted | 是否静音 |
| networkState | 返回当前网络状态 |
| paused | 是否暂停 |
| playbackRate | 播放的倍速 |
| played | 当前播放部件已经播放的时间范围(TimeRanges对象) |
| preload | 页面加载时是否同时加载音视频 |
| readyState | 返回当前的准备状态 |
| seekable | 返回当前可跳转部件的时间范围(TimeRanges对象) |
| seeking | 返回用户是否做了跳转操作 |
| src | 当前音视频源的URL |
| startOffsetTime | 返回当前的时间偏移(Date对象) |
| textTracks | 返回可用的文本轨迹(TextTrackList对象) |
| videoTracks | 返回可用的视频轨迹(VideoTrackList对象) |
| volume | 音量值 |
Event
| 事件event | 描述description |
|---|---|
| abort | 当音视频加载被异常终止时产生该事件 |
| canplay | 当浏览器可以开始播放该音视频时产生该事件 |
| canplaythrough | 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件 |
| durationchange | 当媒体的总时长改变时产生该事件 |
| emptied | 当前播放列表为空时产生该事件 |
| ended | 当前播放列表结束时产生该事件 |
| error | 当加载媒体发生错误时产生该事件 |
| loadeddata | 当加载媒体数据时产生该事件 |
| loadedmetadata | 当收到总时长，分辨率和字轨等metadata时产生该事件 |
| loadstart | 当开始查找媒体数据时产生该事件 |
| pause | 当媒体暂停时产生该事件 |
| play | 当媒体播放时产生该事件 |
| playing | 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件 |
| progress | 当获取到媒体数据时产生该事件 |
| ratechange | 当播放倍数改变时产生该事件 |
| seeked | 当用户完成跳转时产生该事件 |
| seeking | 当用户正执行跳转时操作的时候产生该事件 |
| stalled | 当试图获取媒体数据，但数据还不可用时产生该事件 |
| suspend | 当获取不到数据时产生该事件 |
| timeupdate | 当前播放位置发生改变时产生该事件 |
| volumechange | 当前音量发生改变时产生该事件 |
| waiting | 当视频因缓冲下一帧而停止时产生该事件 |
注意：现在HTML5支持的video格式
你也可以自己灵活定义video的控制面板，充分利用CSS3的丰富效果。
一点点难看，呵呵！其中页面代码比较简单，如下
<body style="background-color:#8EEE5EE;"> <section id="skin"><video id="myMovie" width="640" height="360"><source src="videos/Introduction.mp4"></video><nav><div id="buttons"><button type="button" id="playButton">Play</button></div><div id="defaultBar"><div id="progressBar"></div></div><div style="clear:both"></div></nav></section> </body>
用css控制界面效果
body{text-align:center;
}
header,section,footer,aside,nav,article,hgroup{display:block;
}
#skin{width:700px;margin:10px auto;padding:5px;background:red;border:4px solid black;border-radius:20px;
}
nav{margin:5px 0px;
}
#buttons{float:left;width:70px;height:22px;
}
#defaultBar{position:relative;float:left;width:600px;height:14px;padding:4px;border:1px solid black;background:yellow;
}
/*progressBar在defaultBar内部*/
#progressBar{position:absolute;width:0px; /*使用javascript控制变化*/height:14px; /*和defaultBar高度相同*/background:blue;
}
CSS定的control Panel如上图所示。
接下来就是最主要的javascript代码部分，由四个function构成：
这里用到了HTML5的video的新属性，如.duration,.paused,.ended
function doFisrt()
{barSize=600; //注意不要使用px单位，且不要用var，是全局变量myMovie=document.getElementById('myMovie');playButton=document.getElementById('playButton');bar=document.getElementById('defaultBar');progressBar=document.getElementById('progressBar');playButton.addEventListener('click',playOrPause,false); //第三个参数总是false, Register the event handler for the bubbling phase.bar.addEventListener('click',clickedBar,false);
}
//控制movie播放和停止
function playOrPause(){if(!myMovie.paused && !myMovie.ended){myMovie.pause();playButton.innerHTML='Play';window.clearInterval(updatedBar);}else{myMovie.play();playButton.innerHTML='pause';updatedBar=setInterval(update,500);}
}
//控制进度条的动态显示
function update(){if(!myMovie.ended){var size=parseInt(myMovie.currentTime*barSize/myMovie.duration);progressBar.style.width=size+'px';}else{progressBar.style.width='0px';playButton.innerHTML='Play';window.clearInterval(updatedBar);}
}
//鼠标点击进度条控制方法
function clickedBar(e){if(!myMovie.paused && !myMovie.ended){var mouseX=e.pageX-bar.offsetLeft;var newtime=mouseX*myMovie.duration/barSize; //new starting timemyMovie.currentTime=newtime;progressBar.style.width=mouseX+'px';window.clearInterval(updatedBar);}
}window.addEventListener('load',doFisrt,false);转载于:https://www.cnblogs.com/JoannaQ/archive/2012/09/04/2669831.html
自定义基于HTML5的video播放器—Customize your video player相关推荐
- 直播弹幕 html5,一种基于HTML5的弹幕播放器及其方法与流程
本发明涉及互联网技术领域,具体涉及一种基于HTML5的弹幕播放器及其方法. 背景技术: 弹幕是指一种在观看视频时,大量以字幕(有且不限于文字和图片)形式呈现的评论与视频同在一个画面的现象.在视频上方大 ...
- H5 实现自定义video播放器,快来点我吧
效果 要实现自定义video播放器需要熟悉video的相关操作 视频播放它有哪些操作 1. 播放 play() 2. 暂停 pause() 3. 判断当 ...
- 基于Qt的音乐播放器（一）添加音频文件，播放音乐，更新进度条
2020博客之星年度总评选进行中:请为74号的狗子投上宝贵的一票! 我的投票地址:点击为我投票 文章目录 1.实现音频文件对话框(QFileDialog类) 2.实现音乐播放(QMediaPlayer ...
- html5+video手机样式修改,如何自定义video播放器样式？
本篇文章给大家分享了关于如何自定义video播放器样式,内容很详细,希望可以帮助到大家. DIY 本文基于HTML5 Video API,自定义Web视频播放器样式. 其实吧,原生的video 标签样 ...
- 用html5实现一个播放器,6 个基于 HTML5 实现的多媒体播放器
是 HTML5 中新增的标签,可用于在网页中嵌入视频播放功能,无需 Flash 和其他嵌入插件的支持.但是HTML5目前只有Firefox.Safari.Chrome.Opera.IE9以上支持.此外 ...
- JS 用CANVAS自定义VIDEO播放器
JS 用CANVAS自定义VIDEO播放器 概述 CANVAS绘制核心代码 播放器代码 使用页面HTML代码 使用页面JS代码 使用示例 概述 HTML5用规范的VIDEO标签取代了以往需要借助外部控 ...
- html5 在线播放器多格式,6 个基于 HTML5 实现的多媒体播放器
原标题:6 个基于 HTML5 实现的多媒体播放器 来源:韩老师乐学堂(ID:yupuyuan_2016) 1. Open Standard Media (OSM ) Player OSM Playe ...
- html5播放器自动全屏,HTML5 video播放器全屏(fullScreen)实现的方法
这篇文章主要介绍了HTML5 video播放器全屏(fullScreen)方法实例,本文直接给出一个完整代码实例,需要的朋友可以参考下 首先来说,这个标题具有误导性,但这样设置改标题也是主要因为vid ...
- html5的video播放器上禁止下载和禁止右键下载实现。
<video id="video" src="#" controls controlsList="nodownload" oncont ...
- HTML5之video播放器
效果展示 video播放器案例效果图如下: 说明:本案例并没有写浏览器兼容性,采用的是本地视频,使用火狐浏览器才能正常使用.谷歌浏览器必须用远程视频才行. 思路分析 1.首先添加 playing事件, ...
最新文章
- 云原生体系下 Serverless 弹性探索与实践
- 搜索不包含关键词_亚马逊listing关键词优化
- html乱码框框,springmvc+font-awesome开发出的页面显示方框乱码的解决方法
- 这是我见过最通俗易懂的单例模式讲解了！
- c语言标准化考试程序报告,在线考试系统-c语言报告.doc
- ssis sql_如何在SSIS中使用SQL随机数
- 计算机在英语课中的应用 博客,信息技术在小学英语教学中的应用
- 第三百三十七节，web爬虫讲解2—PhantomJS虚拟浏览器+selenium模块操作PhantomJS
- aoa计算机二级考试答案操作题,浙江省计算机二级等级考试aoa理论题.pdf
- 数学 计算机类论文题目,数学计算机论文题目范文 数学计算机论文标题如何定...
- TX2-刷机完成后安装程序ubuntu_linux命令TX2学习总结
- 基本粒子群算法小结及算法实例（附Matlab代码）
- matlab fft 采样点数,MATLAB中的FFT的采样频率和采样点怎样确定
- Phyton pymssql连接数据库
- python工资条教程_这才是史上最简单的工资条制作方法
- Linux中verilog-mode使用方法总结
- 得物数据抓取+参数加密解析
- 未能将文件 *** \bin\Release\**.dll 复制到 \obj\Release\Package\PackageTmp\bin\***.dll VS发布程序报错 解决办法
- BZOJ3837 : [Pa2013]Filary
- 全球人造丝卫生棉条行业调研及趋势分析报告