1
Javascriptに新しく追加されました。このソリューションはどこにでも見つかりません。私はここにJSFiddleだ... "tabcontent [i]の.firstChild.pause()" の行は全体の機能を壊す)(firstChildでビデオを一時停止しますか?
問題はのfirstChildにあるのかわからない、または.pauseで影響を受けたコードはありますが、まだローカルなのでイメージ/ビデオはありません。
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";
}