具體代碼如下所示：
<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 {width: 720px;height: 360px;margin: 10px auto;border: 1px solid #000;background-color: #000;position: relative;border-radius: 6px;}.player video {width: 720px;height: 360px;}.controls {width: 700px;height: 40px;background-color: rgba(255,255,0,0.3);position: absolute;bottom: 10px;left: 10px;border-radius: 10px;}.switch {position: absolute;width: 22px;height: 22px;background-color: red;left: 10px;top: 9px;border-radius: 50%;}.progress {width: 432px;height: 10px;position: absolute;background-color: rgba(255,255,255,0.4);left: 40px;top: 15px;border-radius: 4px;overflow: hidden;}.curr-progress {width: 0%;height: 100%;background-color: #fff;}.time {width: 120px;height: 20px;text-align: center;line-height: 20px;font-size: 12px;color: #fff;position: absolute;left: 510px;top: 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');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();}}//當(dāng)視頻能播放(已經(jīng)通過網(wǎng)絡(luò)加載完成)時(shí)video.oncanplay = function() {tTime = video.duration; //獲取視頻總時(shí)長(單位秒)var tTimeStr = getTimeStr(tTime);totalTime.innerHTML = tTimeStr;}//當(dāng)視頻當(dāng)前播放時(shí)間更新的時(shí)候video.ontimeupdate = function() {var cTime = video.currentTime; //獲取當(dāng)前播放時(shí)間 var cTimeStr = getTimeStr(cTime);console.log(cTimeStr);currTime.innerHTML = cTimeStr;currProgress.style.width = cTime/tTime*100+"%";}extend.onclick = function() {video.webkitRequestFullScreen(); //視頻全屏}//將以秒為單位的時(shí)間變成“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;return h+":"+m+":"+s;}script>body>html>總結(jié)
以上所述是小編給大家介紹的HTML5 視頻播放(video),JavaScript控制視頻的實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
