HTML5 비디오 이미지/포스터 인 페이드 아웃

Question

비디오를 시작하고 비디오를 일시 중지하거나 중지 할 때 다시 페이드 인하면 HTML5 비디오 포스터/이미지가 페이드 아웃 될 수 있습니까?

일반적으로 비디오가 시작 직접 표시 될 때 포스터 이미지가 바로 우리가 비디오를로드 할 때/그것은

어쩌면 우리가 캔버스에 포스터 이미지를 복제 할 수 있습니다 비디오와 페이드를 통해 위치를 중지 숨겨져 밖으로 그리고 안으로?

기존 솔루션/스크립트가 있습니까?

Answer 1

poster 속성의 동작은 실제로 <video> 태그 자체에 의해 결정됩니다. 이 이미지를 표시하기 전에 말하고있는 것입니다. 모든 동영상 요소 맞춤 설정과 마찬가지로 독자적인 요소가 필요합니다. 기본적으로, 당신은 것입니다 :

<div class="video-container" style="position:relative"> 
    <video width="x" height="y"></video> 
    <img style="position: absolute; top: 0; left: 0; bottom: 0; right: 0"> 
</div> 

그런 다음 Zepto으로 예를 들어, 이벤트를 바인딩해야합니다 : 다시 페이드 발생하면 일시 정지 이벤트를 수신하고 것,

$('.video-container img').bind('click', function() { 
    var $img = $(this), 
     $vid = $img.parent().find('video'); 
    $img.animate({opacity: 0}, 1000, 'linear', function() { 
     $img.css({visibility: 'hidden'}); 
     $vid[0].play(); 
    }); 
}); 

을 유사하게 .

: 말했다
이 아마 두 가지 이유에 대한 나쁜 생각이다
1. iOS 나 스크립트 재생을 방해하는 장치에서는 작동하지 않습니다. 이러한 장치에서는 클릭 이벤트 처리기 내부에서만 play()을 트리거 할 수 있습니다. 나중에 잠시 게임을하고 있기 때문에, 실제로 제어 할 수는 없습니다.
2. 기본 기능이 손상되었습니다. 동영상을 일시 중지 할 때 다른 순간을 찾고 싶지만 제가 중단 한 부분을 확실히 알고 싶습니다. 시각 대기열이 없기 때문에 시각 장애가 발생합니다.

업데이트 다음은 아이폰 OS의 어려움을 극복하는 데 유용한 다른 접근 방식이다. 이 경우 실제로는 동영상을 클릭하여 시작합니다. 즉, 페이딩 이미지가 재생중인 동영상을 덮는 일정 기간이 있으므로 사용자의 전화입니다.

$('.video-container').each(function() { 
    var $img = $(this).find('img'), 
     $vid = $(this).find('vid'); 

    $img.bind('click', function() { $vid[0].play() }); 

    $vid.bind('play', function() { 
     $img.animate({opacity: 0}, 1000, 'linear', function() { 
      if($vid[0].playing) { 
       $img.css({visibility: 'hidden'}); 
      } 
     }); 
    }); 

    $vid.bind('pause ended', function() { 
     $img.css({visibility: 'visible'}); 
     $img.animate({opacity: 1}, 1000, 'linear'); 
    }); 

});