html5 自制播放器
2024-05-13 12:43:58
代码实例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>无标题文档</title><style>*{margin:0; padding:0;}#div1{width:300px; height:30px; background:#666; overflow:hidden; position:relative;}#div2{width:60px; height:30px; background:red; position:absolute; left:0; top:0;}#div3{width:300px; height:10px; background:#666; overflow:hidden; position:relative;top:10px;}#div4{width:60px; height:10px; background:yellow; position:absolute; left:240px;top:0;}</style><script>window.onload= function(){var oV = document.getElementById('v1');var aInput = document.getElementsByTagName('input');var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var oDiv3 = document.getElementById('div3');var oDiv4 = document.getElementById('div4');var disX = 0;var disX2 = 0;var timer = null;aInput[0].onclick = function(){if( oV.paused ){//如果是暂停的
oV.play();this.value = '暂停';nowTime();timer =setInterval(nowTime,1000);}else{oV.pause();this.value = '播放';clearInterval(timer);}};aInput[2].value = changeTime(oV.duration);aInput[3].onclick = function(){if( oV.muted ){oV.volume = 1;this.value = '静音';oV.muted = false;}else{oV.volume = 0;this.value = '取消静音';oV.muted = true;}};aInput[4].onclick = function(){oV.mozRequestFullScreen();};function nowTime(){aInput[1].value =changeTime(oV.currentTime);//获取比例var scale =oV.currentTime/oV.duration;//设置位置oDiv2.style.left = scale * 240 +'px';}function changeTime(iNum){iNum = parseInt( iNum );var iH =toZero(Math.floor(iNum/3600));var iM =toZero(Math.floor(iNum%3600/60));var iS = toZero(Math.floor(iNum%60));return iH + ':' +iM + ':' + iS;}function toZero(num){if(num<=9) {return '0'+num;}else{return '' + num;}}oDiv2.onmousedown = function(ev){var ev = ev || window.event;disX = ev.clientX - oDiv2.offsetLeft;document.onmousemove = function(ev){var ev = ev || window.event;var L = ev.clientX - disX;if(L<0){L = 0;}else if(L>oDiv1.offsetWidth - oDiv2.offsetWidth){L = oDiv1.offsetWidth- oDiv2.offsetWidth;}oDiv2.style.left = L + 'px';//找出0到1的比例var scale =L/(oDiv1.offsetWidth - oDiv2.offsetWidth);//得到拖拽后当前的时间oV.currentTime = scale *oV.duration;//让当前时间更新
nowTime();};document.onmouseup = function(){document.onmousemove = null;};return false;};oDiv4.onmousedown = function(ev){var ev = ev || window.event;disX2 = ev.clientX -oDiv4.offsetLeft;document.onmousemove = function(ev){var ev = ev || window.event;var L = ev.clientX - disX2;if(L<0){L = 0;}else if(L>oDiv3.offsetWidth - oDiv4.offsetWidth){L =oDiv3.offsetWidth - oDiv4.offsetWidth;}oDiv4.style.left = L + 'px';var scale =L/(oDiv3.offsetWidth - oDiv4.offsetWidth);oV.volume = scale;};document.onmouseup = function(){document.onmousemove = null;};return false;};};</script>
</head><body>
<video id="v1" ><source src="陈奕迅 - 陪你度过漫长岁月.mp4" ></source></video><br/>
<input type="button" value="播放" />
<input type="button" value="00:00:00" />
<input type="button" value="00:00:00" />
<input type="button" value="静音" />
<input type="button" value="全屏" />
<div id="div1">
<div id="div2">
</div>
</div>
<div id="div3">
<div id="div4"></div>
</div></body>
</html>2017-09-03 23:07:12
转载于:https://www.cnblogs.com/guangzhou11/p/7471646.html
html5 自制播放器相关推荐
- html5的在线播放页面,整理5款html5网页播放器，总有一款适合你吧
整理了5款html5网页播放器,总有一款适合你吧. 酷播云HTML5倍速功能视频播放器 介绍: 重要提示:本播放器为酷播云在线产品,用户可以免费注册使用,下载包仅提供代码使用示例及演示,并非播放器的下 ...
- Html5 音效播放器
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>HT ...
- 推荐9款优秀的 HTML5 音乐播放器
过去,在网页上播放音频都是通过第三方插件来播放的,如 Flash.QuickTime 和 Silverlight 等,没有统一的音频播放标准.HTML5 通过 audio 元素来提供在网页中嵌入音频的 ...
- Plyr – 简单，灵活的 HTML5 媒体播放器
Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕.它是只支持现代浏览器,轻量,方便和可定制的媒体播放器.还有的标题和屏幕阅读器的全面支持. 在线演示 ...
- ps4看b站 f怎么调html5,b站html5,b站怎么切换到HTML5版播放器？
b站怎么切换到HTML5版播放器? 目前来说B站只能使用HTML5播放器,因为FIASH已经停止维护,所以现在不需要设置,只能使用HTML5播放器 b站怎么做切换到html5视频播放器 1. 在网页上 ...
- 第六节：用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- html音乐播放器如何添加暂停按钮,HotKey播放/暂停HTML5音乐播放器
这是我用于HTML5音乐播放器的一小部分JavaScript代码.我想知道你们是否可以帮我建立一个HotKey来使用Space键切换播放/暂停按钮.有什么想法吗? CODE: $('.tracksli ...
- 简洁的 HTML5 音乐播放器
mePlayer 一款简洁的HTML5音乐播放器.内置两套主题,可在运行时一键切换, 点我在线预览 默认主题 有歌词时滚动显示歌词,无歌词时显示模拟频谱动画 播放中鼠标悬停在界面上滑动滚轮可调节音量, ...
- 带倍速音频播放器_带有播放列表HTML5音频播放器
带倍速音频播放器 HTML5 Audio player with playlist HTML5 audio player. Many of you faced with the task of cre ...
最新文章
- EF－Entity Framework 相关技术点收集贴
- ocrosoft Contest1316 - 信奥编程之路~~~~~第三关 问题 E: IQ(iq)
- 电音之王 对64bit int 取模
- 程序员的未来真的一片阴霾吗，大厂女程序员从未摆脱焦虑
- linux 加jre环境变量
- php二维数组排序 按照指定的key 对数组进行排序
- ENVI修复图像坏点扩展补丁
- 你知道别人怎么看你恢复它？
- swing组建的层次
- python中完整类的定义_详解Python中类的定义与使用
- shell取mysql字段_shell 脚本中获取mysql多个字段的值
- mysql到es的交叉验证
- 如何在 iPhone 和 iPad 上使用与你共享？
- MATLAB一句总结
- Java class文件反编译工具推荐以及Eclipse中查看/调试Jar包中的代码
- Python新书上市，强烈推荐！《Python网络数据爬取及分析从入门到精通（爬取篇）》导读
- ruby与ruby on rails环境部署
- android *#06#_现在在Android＃20中
- LiveGBS-摄像机网页低延时无插件直播实现
- win10任务栏，如何做到图标居中