當圖片點擊時，視頻停止

Question

我有一個帶有縮略圖的視頻庫。當我點擊縮略圖時，出現一個視頻。當我點擊另一個縮略圖時，如何停止/重置正在播放的視頻？ 這裏是我的代碼有

function changeImage(current) { 
    var imagesNumber = 3; 

    for (i=1; i<=imagesNumber; i++) { 
     if (i == current) { 
      document.getElementById("normal" + current).style.display = "block"; 
     } else { 
      document.getElementById("normal" + i).style.display = "none"; 
     } 

    } 
} 

https://jsfiddle.net/r8eboghL/1/

Answer 1

給每個視頻的id。

然後在當前要顯示的視頻上，使用.currentTime = 0;重新開始，然後.play()。

另外，如果您希望該視頻在頁面加載時啓動，則可以提供第一個視頻autoplay。

function changeImage(current) { 
 
    var imagesNumber = 3; 
 

 
    for (i = 1; i <= imagesNumber; i++) { 
 
     if (i == current) { 
 
     document.getElementById("normal" + current).style.display = "block"; 
 
     document.getElementById("video" + current).currentTime = 0; 
 
     document.getElementById("video" + current).play(); 
 
     } else { 
 
     document.getElementById("normal" + i).style.display = "none"; 
 
     document.getElementById("video" + i).pause(); 
 
     } 
 

 
    } 
 
    }

body { 
 
    margin: 0; 
 
    padding: 0; 
 
    background: #222; 
 
    color: #EEE; 
 
    text-align: center; 
 
    font: normal 9pt Verdana; 
 
} 
 
a:link, 
 
a:visited { 
 
    color: #EEE; 
 
} 
 
img { 
 
    border: none; 
 
} 
 
#normal2, 
 
#normal3, 
 
#normal4, 
 
#normal5 { 
 
    display: none; 
 
} 
 
#gallery { 
 
    margin: 0 auto; 
 
    width: 800px; 
 
} 
 
#thumbs { 
 
    margin: 10px auto 10px auto; 
 
    text-align: center; 
 
    width: 800px; 
 
} 
 
#bigimages { 
 
    width: 770px; 
 
    float: left; 
 
} 
 
#thumbs img { 
 
    width: 130px; 
 
    height: 130px; 
 
} 
 
#bigimages video { 
 
    border: 4px solid #555; 
 
    margin-top: 5px; 
 
    width: 750px; 
 
} 
 
#thumbs a:link, 
 
#thumbs a:visited { 
 
    width: 130px; 
 
    height: 130px; 
 
    border: 6px solid #555; 
 
    margin: 6px; 
 
    float: left; 
 
} 
 
#thumbs a:hover { 
 
    border: 6px solid #888; 
 
}

<div id="gallery"> 
 
    <div id="thumbs"> 
 
    <a href="javascript: changeImage(1);"> 
 
     <img src="Noragami Aragoto Op.png" alt="" /> 
 
    </a> 
 
    <a href="javascript: changeImage(2);"> 
 
     <img src="Fairy Tail Op.png" alt="" /> 
 
    </a> 
 
    <a href="javascript: changeImage(3);"> 
 
     <img src="God Eater Op.png" alt="" /> 
 
    </a> 
 

 
    </div> 
 

 
    <div id="bigimages"> 
 
    <div id="normal1"> 
 
     <video id="video1" controls="controls" autoplay> 
 
     <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /> 
 
     </video> 
 
    </div> 
 

 
    <div id="normal2"> 
 
     <video id="video2" controls="controls"> 
 
     <source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4"> 
 
     </video> 
 
    </div> 
 

 
    <div id="normal3"> 
 
     <video id="video3" controls="controls"> 
 
     <source src="http://haignet.co.uk/html5-video-element-test.mp4" type="video/mp4"> 
 
     </video> 
 
    </div> 
 

 

 
    </div> 
 
</div>