如何在视频上显示海报图像使用Jquery结束

how to Show Poster image on video ends using Jquery?

本文关键字：图像 Jquery 结束 海报 显示 视频      更新时间：2023-09-26

我的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');
    });

<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

相关文章：