具体代码如下所示：
<html lang=en><head><meta charset=UTF-8><title>文档标题><style>figcaption {text-align: center;line-height: 150px;font-family: Microsoft Yahei;font-size: 24px;}.player {宽度：720px；高度：360px；边距：10px auto；边框：1px 实心#000;背景颜色: #000;位置:相对;边框半径: 6px;}.播放器视频{宽度:720px;高度:360px;}.控件{宽度:700px;高度:40px;背景颜色:rgba (255,255,0,0.3)；位置：绝对；底部：10px；左： 10px;边框半径：10px;}.switch {位置：绝对；宽度：22px；高度：22px；背景颜色：红色；左：10px；顶部：9px；边框半径：50%；}.progress {宽度：432px；高度：10px；位置：绝对；背景颜色： rgba(255,255,255,0.4);左: 40px;上: 15px;边框半径: 4px;溢出:隐藏;}.curr-progress {宽度: 0%;高度: 100%;背景颜色: #fff;}。时间{宽度：120px；高度：20px；文本对齐：中心；行高： 20px;字体大小：12px;颜色：#fff;位置：绝对；左：510px；顶部：10px；}.extend {位置：绝对；宽度：20px；高度：20px；背景颜色：红色；右：10px ;top: 10px;}style>head><body><figure> <figcaption>视频案例figcaption><div class=player><video src=11.mp4>视频><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');varextend = document.querySelector('.extend');var tTime = 0;playBtn.onclick = function() {if(video.paused){ // 如果视频暂停的 video.play(); //play()播放load()重新加载pause()暂停}else{video.pause();}}//当视频能播放(已经通过网络加载完成)时video.oncanplay = function() {tTime =视频时长； //获取视频总时长(单位秒)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() { video.webkitRequestFullScreen(); //视频全屏}//将以秒为单位的时间变成00:00:00格式的字符串function getTimeStr(time) {var h = Math.floor(time/3600);var m = Math.floor(时间%3600/60);var s = Math.floor(时间%60);h = h>=10?h:0+h;m = m>=10?m:0+m;s = s>=10?s:0+s;return h+:+m+:+s;}脚本>正文>html>总结以上就是小编给大家介绍的HTML5视频播放(视频)、JavaScript控制视频的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时大家回复的。在此也非常感谢大家对VeVb武林网网站的支持！