1
JavaScript超級新手,我無法在任何地方找到任何解決方案。我不知道如果這個問題是則firstChild,或.pause()用firstChild暫停視頻?
的 「tabcontent [I] .firstChild.pause()」 行打破了整個功能...
這裏有一個JSFiddle與受影響的代碼,但沒有圖像/視頻,因爲他們仍然是本地的。
而這裏的影響的代碼在這裏:
HTML:
<div class="video-portfolio">
<div class="video-nav-contain">
<ul class="video-nav">
<li id="hide1">
<a href="#" class="tablinks" onclick="openVideo(event, 'garageBar')">
<img class="tab-icon" src="images/garage-bar-tab.png" onClick="videoDisplay1">
</a>
</li>
<li id="hide2">
<a href="#" class="tablinks" onclick="openVideo(event, 'murryLake')">
<img class="tab-icon" src="images/murry-lake-tab.png">
</a>
</li>
<li id="hide3">
<a href="#" class="tablinks" onclick="openVideo(event, 'roofFun')">
<img class="tab-icon" src="images/roof-fun-tab.png">
</a>
</li>
</ul>
</div>
<div id="garageBar" class="tabcontent" id="videoName">
<video class="vid-tabs" controls>
<source src="images/garage%20bar.mp4" type="video/mp4">
</video>
</div>
<div id="murryLake" class="tabcontent">
<video class="vid-tabs" controls>
<source src="images/murry%20lake2.mp4" type="video/mp4">
</video>
</div>
<div id="roofFun" class="tabcontent">
<video class="vid-tabs" controls>
<source src="images/rooftop%20fun.mp4" type="video/mp4">
</video>
</div>
</div>
然後JavaScript的:
function openVideo(evt, videoName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
tabcontent[i].firstChild.pause()
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(videoName).style.display = "block";
evt.currentTarget.className += " active";
}