具体代码如下所示:
<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 {ancho: 720px;alto: 360px;margen: 10px automático;borde: 1px sólido #000;color de fondo: #000;posición: relativa;radio del borde: 6px;}.video del reproductor {ancho: 720px;alto: 360px;}.controles {ancho: 700px;alto: 40px;color de fondo: rgba(255,255,0,0.3) ;posición: absoluta;abajo: 10px;izquierda: 10px;radio-borde: 10px;}.cambiar {posición: absoluta;ancho: 22px;alto: 22px;color de fondo: rojo;izquierda: 10px;arriba: 9px;radio de borde: 50%;}.progreso {ancho: 432px;alto: 10px ;posición: absoluta;color de fondo: rgba(255,255,255,0.4);izquierda: 40px;arriba: 15px;radio de borde: 4px;desbordamiento: oculto;}.curr-progress {ancho: 0%;alto: 100%;color de fondo: #fff;}.time {ancho: 120px;alto: 20px ;alineación de texto: centro;alto de línea: 20px;tamaño de fuente: 12px;color: #fff;posición: absoluto;izquierda: 510px;arriba: 10px;}.extender {posición: absoluta;ancho: 20px;alto: 20px;color de fondo: rojo;derecha: 10px;arriba: 10px;}estilo>cabeza><cuerpo><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=tiempo total>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 tiempo total = document.querySelector('.tiempo-total');var extender = document.querySelector('.extend');var tTime = 0;playBtn.onclick = function() {if(video.paused){ // 如果视频是暂停的video.play(); //play()播放 load()重新加载 pause()暂停}else{video.pause();}}//当视频能播放(已经通过网络加载完成)时video.oncanplay = function() {tTime = duración del vídeo; //获取视频总时长(单位秒)var tTimeStr = getTimeStr(tTime);totalTime.innerHTML = tTimeStr;}//当视频当前播放时间更新的时候video.ontimeupdate = function() {var cTime = video.currentTime; //获取当前播放时间 var cTimeStr = getTimeStr(cTime);console.log(cTimeStr);currTime.innerHTML = cTimeStr;currProgress.style.width = cTime/tTime*100+%;}extend.onclick = function() { vídeo.webkitRequestFullScreen(); //视频全屏}//将以秒为单位的时间变成00:00:00格式的字符串function getTimeStr(time) {var h = Math.floor(time/3600);var m = Math.floor(tiempo%3600/60);var s = Math.floor(tiempo%60);h = h>=10?h:0+h;m = m>=10?m:0+m;s = s>=10?s:0+s;return h+:+m+:+s;}script>cuerpo>html>总结以上所述是小编给大家介绍的HTML5视频播放(video),JavaScript控制视频的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对VeVb武林网网站的支持！