[JAVASCRIPT] 탭 이동 시 VIMEO 영상 일시정지

VIMEO를 이용해서 홈페이지에 동영상을 업로드했는데요,

탭으로 영상을 넣었을 때, 다른 탭으로 이동 시 영상이 정지되지 않아서 소리가 겹쳤습니다.

 

이를 해결하기 위해 스크립트를 추가했습니다.

 

---

 

1. HTML 코드

 <div class="tab-area">
 
     <ul class="nav nav-tabs nav-justified">
         <li class="active"><a class="tab1" href="#tab1" data-toggle="tab">탭1</a></li>
         <li><a class="tab2" href="#tab2" data-toggle="tab">탭2</a></li>
     </ul>
     
     <div class="tab-content">
         
         <div class="tab-pane active" id="tab1">
             <div class="video-responsive">
                 <iframe class="video-responsive-item" src="https://player.vimeo.com/video/동영상코드"></iframe>
             </div>
         </div>

         <div class="tab-pane" id="tab2">
             <div class="video-responsive">
                 <iframe class="video-responsive-item" src="https://player.vimeo.com/video/동영상코드"></iframe>
             </div>
         </div>
         
     </div>
     
 </div>

- 부트스트랩에서 제공하는 tab 코드입니다.

- 탭은 탭1, 탭2로 나뉘어 있고, 각 탭에 동영상이 하나씩 있습니다.

 

- 동영상은 vimeo에서 iframe으로 가져왔습니다.

- 동영상코드 부분에 번호를 넣어주면 실행됩니다.

 

 

2. Javascript 코드

<script src="//player.vimeo.com/api/player.js"></script>

<script>

    $(function() {
    
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

            var previousActiveTabId = $(e.relatedTarget).attr('href');
            var newlyActivatedTabId = $(e.target).attr('href');

            var playerToPause = new Vimeo.Player($(previousActiveTabId).find('iframe')[0]);
            playerToPause.pause();
            
        });
        
    });
    
</script>

- 먼저 player.js를 가져옵니다.

 

- 만약 다른 탭을 클릭한다면 영상을 중지하도록 했습니다.

 

 

 

이상으로 탭 이동 시 VIMEO 영상 일시 정지될 수 있는 javascript 코드를 알아봤습니다.

 

---