具體程式碼如下所示：
<html lang=en><head><meta charset=UTF-8><title>文件標題><style>figcaption {text-align: center;line-height: 150px;font-family: Microsoft Yahei;font-size : 24px;}.player {寬度：720px;高度：360px;邊距：10px auto;邊框：1px實體#000;背景顏色：#000;位置：相對;邊框半徑：6px;}.播放器影片{寬度: 720px;高度: 360px;}.controls {寬度: 700px;高度: 40px;背景顏色: rgba(255,255,0,0.3);位置: 絕對;底部: 10px;左: 10px; 邊框半徑: 10px; switch {位置：絕對；寬度：22px；高度：22px；背景顏色：紅色；左：10px；頂部：9px；邊框半徑：50%；}.progress {寬度：432px；高度：10px；位置：絕對;背景顏色: rgba(255,255,255,0.4);左: 40px;頂部: 15px;邊框半徑: 4px;溢出:隱藏;}.curr-progress {寬度: 0%;高度: 100%;背景顏色：#fff;}. time {寬度：120px；高度：20px；文字對齊：中心；行高：20px；字體大小：12px；顏色：#fff；位置：絕對；左：510px；頂部：10px ;}.extend {position:absolute; width:20px;height:20px;background-color:red;right:10px;top:10px;}style>head><body><figure> <figcaption>視訊案例figcaption>< div class=player><video src= 11.mp4>video><div class=controls><a href=# class=switch>a><div class=progress><div class=curr-progress>div>div> <div class=time><span class =curr-time>00:00:00span>/<span class=total-time>00:00:00span>div><a href=# class=extend>a>div> div>figure><script>var video = document.querySelector('video');var playBtn = document.querySelector('.switch');var currProgress = document.querySelector('.curr-progress');var currTime = document.querySelector('.curr-time ');vartotalTime = document.querySelector('.total-time');varextend = document.querySelector('.extend');vartTime = 0;playBtn.onclick = 函數() {if(video.paused){ //如果影片暫停的video.play(); //play()播放load()重新載入pause()暫停}else{video.pause();}}//當影片能播放(已經透過網路載入完成)時video.oncanplay = function() {tTime =影片時長； //取得視訊總長度(單位秒)var tTimeStr = getTimeStr(tTime);totalTime.innerHTML = tTimeStr;}//當影片目前播放時間更新的時候video.ontimeupdate = function() {var cTime = video.currentTime; //取得目前播放時間 var cTimeStr = getTimeStr(cTime);console.log(cTimeStr);currTime.innerHTML = cTimeStr;currProgress.style.width = cTime/tTime*100+%;}extend.onclick = function() { video.webkitRequestFullScreen(); //影片全螢幕}//將以秒為單位的時間變成00:00:00格式的字串function getTimeStr(time) {var h = Math.floor(time/3600);var m = Math.floor( time%3600/60);var s = Math.floor(time%60);h = h>=10?h:0+h;m = m>=10?m:0+m;s = s>= 10?s:0+s;返回h+:+m+:+s;}腳本>正文>html>總結以上就是小編給大家介紹的HTML5影片播放(影片)、JavaScript控制影片的實例程式碼，希望對大家有幫助，如果大家有任何疑問請給我留言，小編會及時大家回覆的。非常感謝大家對VeVb武林網網站的支持！