具体代码如下所示:
<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 {largura: 720px;altura: 360px;margem: 10px automático;borda: 1px sólido #000;cor de fundo: #000;posição: relativo;raio da borda: 6px;}.player de vídeo {largura: 720px;altura: 360px;}.controles {largura: 700px;altura: 40px;cor de fundo: rgba (255,255,0,0,3);posição: absoluto;inferior: 10px;esquerda: 10px;raio da borda: 10px;}.switch {posição: absoluto;largura: 22px;altura: 22px;cor de fundo: vermelho;esquerda: 10px;topo: 9px;raio da borda: 50%;}.progress {largura : 432px;altura: 10px;posição: absoluta;cor de fundo: rgba (255,255,255,0,4);esquerda: 40px;topo: 15px;raio da borda: 4px;overflow: oculto;}.curr-progress {largura: 0%;altura: 100%;cor de fundo: #fff;}. tempo {largura: 120px;altura: 20px;alinhamento de texto: centro;altura da linha: 20px;tamanho da fonte: 12px;cor: #fff;posição: absoluta;esquerda: 510px;topo: 10px;}.extend {posição: absoluta;largura: 20px;altura: 20px;cor de fundo: vermelho;direita: 10px ;top: 10px;}estilo>cabeça><corpo><figura> <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>figura><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 = função () {if(video.paused){ // Adicionar vídeo.play(); //play() e load() e pause() e else{video.pause();}}//especificando video.oncanplay = function() {tTime = duração.do vídeo; //获取视频总时长(单位秒)var tTimeStr = getTimeStr(tTime);totalTime.innerHTML = tTimeStr;}//当视频当前播放时间更新的时候video.ontimeupdate = function() {var cTime = vídeo.tempoatual; //获取当前播放时间 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( tempo%3600/60);var s = Math.floor(tempo%60);h = h>=10?h:0+h;m = m>=10?m:0+m;s = s>=10?s:0+s;retorno h+:+m+:+s;}script>corpo>html>总结以上所述是小编给大家介绍的HTML5视频播放(vídeo),JavaScript控制视频的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！