자동 재생 HTML5 Fancybox의 비디오

Question

나는 HTML5 비디오 갤러리뿐만 아니라 단일 HTML5 비디오를 표시하기 위해 Fancybox를 사용하는 프로젝트에서 작업 중입니다.

단일 비디오 인 경우, 비디오를 Fancybox에서 열면 자동으로 재생하고, 비디오 재생이 끝나면 Fancybox를 닫습니다.

갤러리의 동영상 인 경우 팬시 박스에서 열 때 동영상을 자동 재생하고 동영상 재생이 끝나면 다음 갤러리 항목으로 이동하고 현재 동영상 일시 중지/다음/이전 동영상 자동 재생을 원한다면 사용자가 갤러리를 탐색합니다.

이

// Attempt 01  
$(".fancybox-video").find('video').play(); 

// Attempt 02 
$(".fancybox-video").find('video').attr('autoplay','autoplay'); 

// Attempt 03 
var vid = document.getElementsByClassName("fancybox-video"); 
function playVid() { 
    vid.play(); 
} 

이 어떤 도움을 주시면 감사하겠습니다 : Fancybox의 "후 부하"기능 작업 내 시도의 몇 가지를 포함 http://codepen.io/ericjacksonwood/pen/kXKkaq/을 :

나는 여기에 codepen 포함 시켰습니다! 감사.

-------- 편집 --------

codepen가 업데이트되었습니다 제대로 작동합니다.

Answer 1

html5의 미디어 methods과 events을 사용할 수 있습니다.

나는 슬라이드 쇼 애니메이션이 완료되면 비디오를 시작합니다 play 방법을 사용하고, 영상이 종료되면 ended 콜백은 fancybox.next() 함수를 호출 할 수 있습니다.

$(document).ready(function() { 
 
    $(".fancybox").fancybox({ 
 
    afterShow: function() { 
 
     // After the show-slide-animation has ended - play the vide in the current slide 
 
     this.content.find('video').trigger('play') 
 
     
 
     // Attach the ended callback to trigger the fancybox.next() once the video has ended. 
 
     this.content.find('video').on('ended', function() { 
 
     $.fancybox.next(); 
 
     }); 
 
    } 
 
    }); 
 
});

.fancybox-video { 
 
    display: none; 
 
} 
 

 
.fancybox-nav { 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
      transform: translateY(-50%); 
 
    height: 40%; 
 
} 
 

 
/**** DEMO STUFF ****/ 
 
html, body { 
 
    padding: 1em; 
 
} 
 

 
hr { 
 
    border: none; 
 
    height: 1px; 
 
    background: #eee; 
 
    display: block; 
 
    clear: left; 
 
    margin: 4em 0 2em 0; 
 
} 
 

 
.video-links { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 
.video-links li { 
 
    float: left; 
 
    margin-right: 10px; 
 
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css"> 
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script> 
 

 

 
<h4>01. Single Video</h4> 
 
<ul> 
 
    <li>Autoplay HTML5 video when Fancybox opens</li> 
 
    <li>Close Fancybox after video is finished playing</li> 
 
</ul> 
 

 
<ul class="video-links"> 
 
    <li><a class="fancybox" href="#single-video">Video 01</a></li> 
 
</ul> 
 

 
<div id="single-video" class="fancybox-video"> 
 
    <video controls width="100%" height="auto"> 
 
    <source src="https://cache.wdcdn.net/asset/assetId/2508128/size/primary/ts/1471978675/type/library/client/WD-8KVJQ/Oikos_TheSpill.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4"> 
 
    </video> 
 
</div> 
 

 
<hr/> 
 

 
<h4>02. Video Gallery</h4> 
 
<ul> 
 
    <li>Autoplay HTML5 video when Fancybox opens</li> 
 
    <li>Advance Fancybox to next video in gallery when video is finished playing</li> 
 
    <li>Pause video if user navigates to next video in gallery (which fancybox seems to do already)</li> 
 
    <li>Autplay next video if user navigates through the gallery</li> 
 
    <li>Close Fancybox after last video is finished playing</li> 
 
</ul> 
 

 
<ul class="video-links"> 
 
    <li><a class="fancybox" rel="video-gallery" href="#video01">Video 01</a></li> 
 
    <li><a class="fancybox" rel="video-gallery" href="#video02">Video 02</a></li> 
 
    <li><a class="fancybox" rel="video-gallery" href="#video03">Video 03</a></li> 
 
</ul> 
 

 
<div id="video01" class="fancybox-video"> 
 
    <video controls width="100%" height="auto"> 
 
    <source src="https://cache.wdcdn.net/asset/assetId/2508128/size/primary/ts/1471978675/type/library/client/WD-8KVJQ/Oikos_TheSpill.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4"> 
 
    </video> 
 
</div> 
 

 
<div id="video02" class="fancybox-video"> 
 
    <video controls width="100%" height="auto"> 
 
    <source src="https://cache.wdcdn.net/asset/assetId/2506071/size/primary/ts/1369681137/type/library/client/WD-8KVJQ/TaxAct_FreetoPee.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4">  
 
    </video> 
 
</div> 
 

 
<div id="video03" class="fancybox-video"> 
 
    <video controls width="100%" height="auto"> 
 
    <source src="https://cache.wdcdn.net/asset/assetId/2507394/size/primary/ts/1471978845/type/library/client/WD-8KVJQ/WalMart_Legs_15.mp4?token=fc1b0717c&category=pres&action=view" type="video/mp4"> 
 
    </video> 
 
</div>