站长资源网页制作 html5 自定义播放器核心代码 整理:jimmy2024/10/5浏览2次 站长资源 网页制作 网盘链接 云盘下载 简介网页html 复制代码代码如下: 网页html 复制代码代码如下: <body style="background-color:#8EEE5EE;"> <section id="skin"> <video id="myMovie" width="640" height="360"> <source src="/UploadFiles/2021-03-30/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; } javascript代码 复制代码代码如下: 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 time myMovie.currentTime=newtime; progressBar.style.width=mouseX+'px'; window.clearInterval(updatedBar); } } window.addEventListener('load',doFisrt,false); 好东西啊,摘了代码部分 上一篇:html5 css3网站菜单实现代码 下一篇:谷歌浏览器小字体处理方案即12px以下字体 最新资源 何洛洛.2024-别叫醒我(EP)【光羽】【FLAC 林忆莲.1996-爱莲说2CD【华纳】【WAV+CUE 黄妃.2005-红【亚律】【WAV+CUE】 刘美麟《同生》[FLAC/分轨][161.95MB] 群星《前途海量 电影原声专辑》[320K/MP3 群星《前途海量 电影原声专辑》[FLAC/分轨 张信哲.1992-知道新曲与精丫巨石】【WAV+ 王翠玲.1995-ANGEL【新艺宝】【WAV+CUE】 景冈山.1996-我的眼里只有你【大地唱片】 群星《八戒 电影原声带》[320K/MP3][188. 一句话新闻微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。