具体代码如下所示：
<html lang=en><head><meta charset=UTF-8><title>Documenttitle><style>figcaption {text-align: center;line-height: 150px;font-family: Microsoft Yahei;ukuran font: 24px;}.player {width: 720px;height: 360px;margin: 10px auto;border: 1px solid #000;warna latar: #000;posisi: relatif;radius batas: 6px;}.pemutar video {lebar: 720px;tinggi: 360px;}.kontrol {lebar: 700px;tinggi: 40px;warna latar: rgba(255,255,0,0.3) ;posisi: absolut;bawah: 10px;kiri: 10px;radius batas: 10px;}.switch {posisi: absolut;lebar: 22px;tinggi: 22px;warna latar: merah;kiri: 10px;atas: 9px;radius batas: 50%;}.progress {lebar: 432px;tinggi: 10px ;posisi: absolut;warna latar: rgba(255,255,255,0.4);kiri: 40px;atas: 15px;radius batas: 4px;overflow: tersembunyi;}.curr-progress {lebar: 0%;tinggi: 100%;warna latar: #fff;}.time {lebar: 120px;tinggi: 20px ;perataan teks: tengah;tinggi garis: 20px;ukuran font: 12px;warna: #fff;posisi: absolut;kiri: 510px;atas: 10px;}.extend {posisi: absolut;lebar: 20px;tinggi: 20px;warna latar: merah;kanan: 10px;atas: 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 kelas=total-waktu>00:00:00span>div><a href=# class=extend>a>div>div>gambar><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 extend = document.querySelector('.extend');var tTime = 0;playBtn.onclick = function() {if(video.paused){ // 如果视频是暂停的video.play(); //play()播放 load()重新加载 Pause()暂停}else{video.pause();}}//当视频能播放(已经通过网络加载完成)时video.oncanplay = function() {tTime = video.durasi; //获取视频总时长(单位秒)var tTimeStr = getTimeStr(tTime);totalTime.innerHTML = tTimeStr;}//当视频当前播放时间更新的时候video.ontimeupdate = function() {var cTime = video.waktu saat ini; //获取当前播放时间 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 = Matematika.lantai(waktu%3600/60);var s = Matematika.lantai(waktu%60);h = h>=10?h:0+h;m = m>=10?m:0+m;s = s>=10?s:0+s;kembalikan h+:+m+:+s;}skrip>isi>html>总结Bagaimana cara menggunakan HTML5?视频播放(video),JavaScript控制视频的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！