网页视频播放php拉伸代码,HTML5 视频播放(video),JavaScript控制视频的实例代码

具体代码如下所示：

Documenttitle>

figcaption {

text-align: center;

line-height: 150px;

font-family: "Microsoft Yahei";

font-size: 24px;

}

.player {

width: 720px;

height: 360px;

margin: 10px auto;

border: 1px solid #000;

background-color: #000;

position: relative;

border-radius: 6px;

}

.player video {

width: 720px;

height: 360px;

}

.controls {

width: 700px;

height: 40px;

background-color: rgba(255,255,0,0.3);

position: absolute;

bottom: 10px;

left: 10px;

border-radius: 10px;

}

.switch {

position: absolute;

width: 22px;

height: 22px;

background-color: red;

left: 10px;

top: 9px;

border-radius: 50%;

}

.progress {

width: 432px;

height: 10px;

position: absolute;

background-color: rgba(255,255,255,0.4);

left: 40px;

top: 15px;

border-radius: 4px;

overflow: hidden;

}

.curr-progress {

width: 0%;

height: 100%;

background-color: #fff;

}

.time {

width: 120px;

height: 20px;

text-align: center;

line-height: 20px;

font-size: 12px;

color: #fff;

position: absolute;

left: 510px;

top: 10px;

}

.extend {

position: absolute;

width: 20px;

height: 20px;

background-color: red;

right: 10px;

top: 10px;

}

style>

head>

视频案例figcaption>

video>

a>

div>

div>

00:00:00span>/

00:00:00span>

div>

a>

div>

div>

figure>

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()重新加载 pause()暂停

}else{

video.pause();

}

}

//当视频能播放(已经通过网络加载完成)时

video.oncanplay = function() {

tTime = video.duration; //获取视频总时长(单位秒)

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(time%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;

}

script>

body>

html>

总结

以上所述是小编给大家介绍的HTML5 视频播放(video),JavaScript控制视频的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！