HTML5 视频播放(video),JavaScript控制视频的实例代码

具体代码如下所示：

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 {
    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>
    body>
    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()播放  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控制视频的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！