具体代码如下所示 :
<html lang=fr><head><meta charset=UTF-8><title>Documenttitle><style>figcaption {text-align : center;line-height : 150px;font-family : Microsoft Yahei;font-size : 24px;}.player {largeur : 720px;hauteur : 360px;marge : 10px auto;bordure : 1px solide #000;couleur d'arrière-plan : #000;position : relative ;rayon de bordure : 6 px ;}.player vidéo {largeur : 720 px ; hauteur : 360 px ;}.contrôles {largeur : 700 px ; hauteur : 40 px ; couleur d'arrière-plan : rgba (255 255,0,0.3) ;position : absolue;bas : 10px;gauche : 10px;border-radius : 10px;}.switch {position : absolue;largeur : 22px;hauteur : 22px;couleur d'arrière-plan : rouge;gauche : 10px;haut : 9px;radius de bordure : 50 %;}.progress {largeur : 432px;hauteur : 10px ;position : absolue ;couleur d'arrière-plan : rgba(255,255,255,0.4);gauche : 40px;haut : 15px;border-rayon : 4px;débordement : caché;}.curr-progress {largeur : 0 % ;hauteur : 100 %;couleur d'arrière-plan : #fff;}.time {largeur : 120 px;hauteur : 20px ;alignement du texte : centre ;hauteur de la ligne : 20 px;taille de la police : 12 px;couleur : #fff;position : absolu ; gauche : 510 px ; haut : 10 px ;}.extend {position : absolue ; largeur : 20 px ; hauteur : 20 px ; couleur d'arrière-plan : rouge ; droite : 10 px ; haut : 10 px ;} style > tête >< corps >< 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() avec load() avec pause() avec autre chose{video.pause();}}//当视频能播放(已经通过网络加载完成)时video.oncanplay = function() {tTime = vidéo.durée ; //获取视频总时长(单位秒)var tTimeStr = getTimeStr(tTime);totalTime.innerHTML = tTimeStr;}//当视频当前播放时间更新的时候video.ontimeupdate = function() {var cTime = vidéo.currentTime ; //Console.log(cTimeStr);currTime.innerHTML = cTimeStr;currProgress.style.width = cTime/tTime*100+%;}extend.onclick = function() { vidéo.webkitRequestFullScreen(); //视频全屏}//将以秒为单位的时间变成00:00:00格式的字符串function getTimeStr(time) {var h = Math.floor(time/3600);var m = Math.floor( temps%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;retour h+:+m+:+s;}script>corps>html>总结以上所述是小编给大家介绍的HTML5视频播放(video),JavaScript控制视频的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VeVb武林网网站的支持！