具体代码如下所示:
<html lang=en><head><meta charset=UTF-8><title>Documenttitle><style>figcaption {text-align: center;line-height: 150px;font-family: Microsoft Yahei;font-size: 24 пикселя;}.player {ширина: 720 пикселей; высота: 360 пикселей; поле: 10 пикселей авто; граница: 1 пиксель сплошная #000;цвет фона: #000;позиция: относительная;border-radius: 6 пикселей;}.player видео {ширина: 720 пикселей; высота: 360 пикселей;}.controls {ширина: 700 пикселей; высота: 40 пикселей; цвет фона: rgba (255,255,0,0.3); позиция: абсолютная; внизу: 10 пикселей; слева: 10px;border-radius: 10px;}.switch {position: Absolute;width: 22px;height: 22px;background-color: red;left: 10px;top: 9px;border-radius: 50%;}.progress {width : 432px;высота: 10px;позиция: абсолютная;цвет фона: rgba(255,255,255,0.4);слева: 40 пикселей;сверху: 15 пикселей;border-radius: 4px;переполнение: скрыто;}.curr-progress {ширина: 0%;высота: 100%;цвет фона: #fff;}. время {ширина: 120 пикселей; высота: 20 пикселей; выравнивание текста: центр;line-height: 20 пикселей;размер шрифта: 12 пикселей;цвет: #fff;позиция: абсолютная;слева: 510 пикселей;сверху: 10 пикселей;}.extend {позиция: абсолютная;ширина: 20 пикселей;высота: 20 пикселей;цвет фона : красный;справа: 10 пикселей;сверху: 10 пикселей;}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 = функция () {if(video.paused){ // 如果视频是暂停的video.play(); //play() и функция load(), и пауза(), и еще {video.pause();}} // и функция загрузки() видео.продолжительность; // 获取视频总时长(单位秒)var tTimeStr = getTimeStr(tTime);totalTime.innerHTML = tTimeStr;}//当视频当前播放时间更新的时候video.ontimeupdate = function() {var cTime = видео.текущеевремя; //запуск вар cTimeStr = getTimeStr(cTime);console.log(cTimeStr);currTime.innerHTML = cTimeStr;currProgress.style.width = cTime/tTime*100+%;}extend.onclick = function() { видео.webkitRequestFullScreen(); // 视频全屏}//将以秒为单位的时间变成00:00:00格式的字符串function getTimeStr(time) {var h = Math.floor(time/3600);var m = Math.floor( время%3600/60);вар 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;}script>body>html>总结Формат HTML5 для файлов HTML5.视频播放(видео),JavaScript控制视频的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言, 小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！