具体代码如下所示：
<html lang=en><head><meta charset=UTF-8><title>Documenttitle><style>figcaption {text-align: center;line-height: 150px;font-family: Microsoft Yahei;font-size: 24px;}.player {ความกว้าง: 720px; ความสูง: 360px; ระยะขอบ: 10px อัตโนมัติ; เส้นขอบ: 1px solid #000; สีพื้นหลัง: #000;ตำแหน่ง: สัมพันธ์;เส้นขอบรัศมี: 6px;}.ผู้เล่นวิดีโอ {ความกว้าง: 720px;ความสูง: 360px;}.ควบคุม {ความกว้าง: 700px;ความสูง: 40px;สีพื้นหลัง: rgba(255,255,0,0.3) ;ตำแหน่ง: สัมบูรณ์;ด้านล่าง: 10px;ซ้าย: 10px;เส้นขอบรัศมี: 10px;}.สลับ {ตำแหน่ง: สัมบูรณ์;ความกว้าง: 22px;ความสูง: 22px;สีพื้นหลัง: สีแดง;ซ้าย: 10px;ด้านบน: 9px;รัศมีเส้นขอบ: 50%;}.ความคืบหน้า {ความกว้าง: 432px;ความสูง: 10px ;ตำแหน่ง: สัมบูรณ์;สีพื้นหลัง: rgba(255,255,255,0.4);ซ้าย: 40px;ด้านบน: 15px;border-radius: 4px;overflow: Hidden;}.curr-progress {width: 0%;height: 100%;สีพื้นหลัง: #fff;}.time {width: 120px;height: 20px;text-align : center;line-height: 20px;font-size: 12px;color: #fff;position: Absolute;left: 510px;top: 10px;}.extend {ตำแหน่ง: แน่นอน;ความกว้าง: 20px;ความสูง: 20px;สีพื้นหลัง: สีแดง;ขวา: 10px;ด้านบน: 10px;}สไตล์>หัว><ร่างกาย><รูป> <figcaption>视频案例figcaption> <div class=player><video src=11.mp4>วิดีโอ><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');var TotalTime = document.querySelector('.total-time');var ขยาย = document.querySelector ('.extend');var tTime = 0;playBtn.onclick = function() {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 = วิดีโอ 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( เวลา%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;return h+ :+m+:+s;}สคริปต์>ร่างกาย>html>总结以上所述是小编给大介绍的HTML5视频播放(video),JavaScript控制视频的实例代码，希望对大家有所帮助，如果大อยู่บ้านมี任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！