如何在視頻上使用jquery顯示海報圖片？

Question

我的HTML5視頻控制API有一個形狀。但是現在客戶要求我在播放視頻後顯示海報。

現在有一個深黑色的背景。

請讓我知道我必須這樣做。

<video width="640" height="360" x-webkit-airplay="allow" poster="asserts/poster.png" preload="" tabindex="0" class="video1"> 
    <source data-quality="sd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.mp4"></source> 
    <source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.mp4"></source>    
    <source data-quality="sd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_360p.webm"></source> 
    <source data-quality="hd" src="http://media.jilion.com/videos/demo/midnight_sun_sv1_720p.webm"></source>    
</video> 

而且Jquery的功能可按播放/暫停是：

/* Play/Pause */ 
    var gPlay = function() { 
     if($hdVideo.attr('paused') == false) { 
      $hdVideo[0].pause(); 
      $video_main_control.removeClass("hd-video-main-control-none"); 
      $hdVideo[0].poster.show(); 
     } 
     else { 
      $hdVideo[0].play(); 
      $video_main_control.addClass("hd-video-main-control-none"); 
     } 
    }; 
    $video_main_control.click(gPlay); 
    $hd_play_btn.click(gPlay); 
    $hdVideo.click(gPlay); 
    $hdVideo.bind('play', function() { 
     $hd_play_btn.addClass('hd-paused-button'); 
      }); 
      $hdVideo.bind('pause', function() { 
       $hd_play_btn.removeClass('hd-paused-button'); 
      }); 
    $hdVideo.bind('ended', function() { 
       $hd_play_btn.removeClass('hd-paused-button'); 
    }); 

Answer 1

<video width="640" height="360" x-webkit-airplay="allow" poster="asserts/poster.png" preload="" tabindex="0" class="video1" id="video_elem">  
</video> 

var showBanner = function() { 
    // Show your banner 
}; 
document.getElementById("video_elem").addEventListener("ended",showBanner, false); 

視頻API已經「結束」事件作此用途。參考文獻：https://developer.mozilla.org/en-US/docs/DOM/Media_events