具体代码如下所示：
<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 {너비: 720px;높이: 360px;여백: 10px 자동;테두리: 1px 솔리드 #000;배경 색상: #000;위치: 상대;경계 반경: 6px;}.player 비디오 {폭: 720px; 높이: 360px;}.controls {폭: 700px; 높이: 40px;배경 색상: rgba (255,255,0,0.3);위치: 절대;하단: 10px;왼쪽: 10px;border-radius: 10px;}.switch {위치: 절대;너비: 22px;높이: 22px;배경색: 빨간색;왼쪽: 10px;위: 9px;border-radius: 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 ;상단: 10px;}스타일>머리><몸><그림> <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()播放 load() 새로운 加载 일시 중지()暂停}else{video.pause();}}//当视频能播放(已经通过网络加载完成)时video.oncanplay = function() {tTime = 비디오.기간; //获取视频总时长(单位秒)var tTimeStr = getTimeStr(tTime);totalTime.innerHTML = tTimeStr;}//当视频当前播放时间更새로운 时候video.ontimeupdate = function() {var cTime = 비디오.현재시간; //실행 전 실행 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(time%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控 제조사 가계는 任何疑问请给我留言, 小编会及时回复大가족입니다.