葫芦的运维日志_cssjshtml_javascript控制多视频播放

浏览量 4668

2018/11/01 15:22

javascript控制多视频播放，控制多个视频从不同时间开始，到不同时间结束。

html实现视频播放指定时间段：

因流量问题，为方便演示，demo只用了一个视频，当然可以放不同视频来进行。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>video</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta charset="utf-8">
  </head>
<style>
.container{
float:left;
margin-left:15px;
}
button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
.ceter{
width:100%;
text-align:center
}
#btdiv{

text-align:center
}
</style>

<body>
<div id='btdiv'>
        <button id='start'>start</button>
</div>
    <div class="container">
<div class="ceter">oppor11
        <input type="text" id="showTime1"/>
</div>
        <video  width="600px" height="400px"  id="video1" autoplay="autoplay" controls=true src='./test.mp4'>
        </video>

    </div>
    <div class="container">
<div class="ceter">xiaomi8
        <input type="text" id="showTime2"/>
</div>
        <video  width="600px" height="400px"  id="video2" autoplay="autoplay" controls=true src='./test.mp4'>
        </video>
    </div>
    <div class="container">
<div class="ceter">samsungs8
        <input type="text" id="showTime3"/>
</div>
        <video  width="600px" height="400px"  id="video3" autoplay="autoplay" controls=true src='./test.mp4'>
        </video>
    </div>
    <div class="container">
<div class="ceter">vivox20
        <input type="text" id="showTime4"/>
</div>
        <video  width="600px" height="400px"  id="video4" autoplay="autoplay" controls=true src='./test.mp4'>
        </video>
    </div>
</body>
<script>

    var myVid1=document.getElementById("video1");
    var myVid2=document.getElementById("video2");
    var myVid3=document.getElementById("video3");
    var myVid4=document.getElementById("video4");

    var show1=document.getElementById("showTime1");
    var show2=document.getElementById("showTime2");
    var show3=document.getElementById("showTime3");
    var show4=document.getElementById("showTime4");


    //视频播放
    function playMedia(show,vid,startTime,endTime){
        //设置结束时间
        vid.currentTime=startTime;
vid.addEventListener("timeupdate",function(){
timeupdate(show,vid,endTime);
});
          vid.play();

    }
var startbutton=document.getElementById("start");

startbutton.onclick=function(){
playMedia(show1,myVid1,0,3);
playMedia(show2,myVid2,2,5);
playMedia(show3,myVid3,5,8);
playMedia(show4,myVid4,4,7);
}

 function timeupdate(show,vid,endtime){
        //因为当前的格式是带毫秒的float类型的如：12.231233，所以把他转成String了便于后面分割取秒
        var time = vid.currentTime+"";
        show.value=time;
        var ts = time.substring(0,time.indexOf("."));
        if(ts==endtime){
            vid.pause();
        }

    }
</script>
</html>

葫芦的运维日志

打赏