Javascript 的 super 新手,我在任何地方都找不到任何解决方案。我不确定问题出在 firstChild 还是 .pause()
“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";
}
最佳答案
问题不在于 pause()
,而在于 firstChild
。视频元素即将成为第二个 child 。 firstChild
将输出作为 #text
使用 childNodes[1]
访问第二个 child ,即视频
tabcontent[i].childNodes[1].pause();
JS
<script>
function openVideo(evt, videoName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
console.log(tabcontent[i].childNodes[1]);
tabcontent[i].childNodes[1].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";
}
</script>
关于javascript - 暂停与 firstChild 的视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39036803/