javascript - 与firstChild暂停视频？

Javascript超级新手，我在任何地方都找不到解决方案。我不确定问题出在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。 video元素将成为第二个孩子。 firstChild给出的输出为#text

使用childNodes[1]访问第二个孩子，即视频

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>

JSFIDDLE

关于javascript - 与firstChild暂停视频？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39036803/