现在随着html5的渐热，越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。html代码：<!DOCTYPE html><html lang="en"><head> <meta charset ...
现在随着html5的渐热，越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。
html代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5-Video-Player</title> <style type="text/css"> .videoPlayer{ border: 1px solid #000; width: 600px; } #video{ margin-top: 0px; } #videoControls{ width: 600px; margin-top: 0px; } .show{ opacity: 1; } .hide{ opacity: 0; } #progressWrap{ background-color: black; height: 25px; cursor: pointer; } #playProgress{ background-color: red; width: 0px; height: 25px; border-right: 2px solid blue; } #showProgress{ background-color: ; font-weight: 600; font-size: 20px; line-height: 25px; } </style></head><body> <div class=""> <h1>HTML5_Video_Player</h1> <div class="videoPlayer" id="videoContainer"> <video id="video" width="600" height="360" preload controls > <source src='/images/loading.gif' data-original="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type='video/mp4'> <source src='/images/loading.gif' data-original="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'> </video> <div id="videoControls"> <div id="progressWrap"> <div id="playProgress"> <span id="showProgress">0</span> </div> </div> <div> <button id="playBtn" title="Play"> 播放 </button> <button id="fullScreenBtn" title="FullScreen Toggle"> 全屏 </button> </div> </div> </div> </div></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：html5 实现video标签的自定义播放进度条
关键词：HTML
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
