只有第一个HTML5视频正在播放

时间:2017-04-27 21:30:14

标签: javascript html5 html5-video

正如标题所说,我的视频中只有第一个视频可以播放而后两个视频不播放。为简洁起见,我已经编写了一次HTML,每个视频的代码相同但视频源对应于每个文件,我已经确认这不是问题。任何关于为什么我的代码按预期运行的指针都将非常感激。

HTML

<div id="video_player_box">
   <button id="bigplaybtn">
      <img src="assets/css/images/BB.png">
   </button>
   <div id="transpausebutton"></div>
      <video id="my_video" width="540px" height="360px" poster="assets/css/images/poster-big-buck-bunny.png">
            <source src="assets/css/Video/1.mp4">
      </video>
      <div id="video_controls_bar">
         <button id="playpausebtn"></button>
         <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
         <span id="curtimetext">00:00</span>
         <span id="cross">/</span>
         <span id="durtimetext">00:00</span>
         <button id="mutebtn"></button>
         <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
       </div>
   </div>

JS

 var vid, playbtn, bigplaybtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider;
        function intializePlayer(){

            vid = document.getElementById("my_video");
            playbtn = document.getElementById("playpausebtn");
            bigplaybtn = document.getElementById("bigplaybtn");
            transpausebutton = document.getElementById("transpausebutton");
            seekslider = document.getElementById("seekslider");
            curtimetext = document.getElementById("curtimetext");
            durtimetext = document.getElementById("durtimetext");
            mutebtn = document.getElementById("mutebtn");
            volumeslider = document.getElementById("volumeslider");

    playbtn.addEventListener("click",playPause,false);
    bigplaybtn.addEventListener("click",playPause,false);
    transpausebutton.addEventListener("click",playPause,false);
    seekslider.addEventListener("change",vidSeek,false);
    vid.addEventListener("timeupdate",seektimeupdate,false);
    mutebtn.addEventListener("click",vidmute,false);
    volumeslider.addEventListener("change",setvolume,false);
        }
        window.onload = intializePlayer;
        function playPause(){
            if(vid.paused){
                vid.play();
                playbtn.style.background = "url(assets/css/images/Pause.png)";
                playbtn.style.backgroundSize = "20px 20px";
                bigplaybtn.style.display = "none";
                transpausebutton.style.display = "inline";
            }
            else {
                vid.pause();
                playbtn.style.background = "url(assets/css/images/Play.png)";
                playbtn.style.backgroundSize ="20px 20px";
                bigplaybtn.style.display = "inline";
                transpausebutton.style.display = "none";
            }
        }
        function vidSeek(){
            var seekto = vid.duration * (seekslider.value / 100);
            vid.currentTime = seekto;
        }
        function seektimeupdate(){
            var nt = vid.currentTime * (100 / vid.duration);
            seekslider.value = nt;
            var curmins = Math.floor(vid.currentTime / 60);
            var cursecs = Math.floor(vid.currentTime - curmins * 60);
            var durmins = Math.floor(vid.duration / 60);
            var dursecs = Math.floor(vid.duration - durmins * 60);
            if(cursecs < 10){ cursecs = "0"+cursecs; }
            if(dursecs < 10){ dursecs = "0"+dursecs; }
            if(curmins < 10){ curmins = "0"+curmins; }
            if(durmins < 10){ durmins = "0"+durmins; }
            curtimetext.innerHTML = curmins+":"+cursecs;
            durtimetext.innerHTML = durmins+":"+dursecs;
        }
        function vidmute(){
            var userVolume;
            if(vid.muted){
                vid.muted = false;
                mutebtn.style.background = "url(assets/css/images/UM.png)";
                mutebtn.style.backgroundSize ="20px 20px";
                volumeslider.value = 100;
            }
            else {
                vid.muted = true;
                mutebtn.style.background = "url(assets/css/images/M.png)";
                mutebtn.style.backgroundSize ="20px 20px";
                volumeslider.value = 0;
            }
        }
        function setvolume(){
            vid.volume = volumeslider.value / 100;
        }

0 个答案:

没有答案
相关问题