firstChild로 동영상을 일시 중지 하시겠습니까?

Question

Javascript의 새로운 기능이 새롭고 어디서나이 솔루션을 찾는 데 어려움을 겪고 있습니다. 나는 문제가 .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> 

그리고 자바 스크립트 :

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"; 
} 

Answer 1

문제는 pause()으로 만 firstChild하지입니다

그리고 여기 여기에 영향받는 코드입니다. 동영상 요소가 두 번째 자식이 될 것입니다. firstChild 비디오

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

즉 번째 자식 액세스 할 #text

사용 childNodes[1]로 출력을 제공한다