Question

我希望在视频播放完毕后，海报和播放图标会显示出来。

有没有人试图实现这个目标呢？

Answer 1

是的，我自己尝试了一个项目，客户希望在视频完成后回复海报图片。这是我的代码：

    jQuery("video").mediaelementplayer({
        features: ["playpause","progress","current","duration","volume","fullscreen"],
        success:  function (mediaElement, domObject) { 
            mediaElement.addEventListener("ended", function(e){ 
                // Revert to the poster image when ended
                var $thisMediaElement = (mediaElement.id) ? jQuery("#"+mediaElement.id) : jQuery(mediaElement);
                $thisMediaElement.parents(".mejs-inner").find(".mejs-poster").show();
            });
        }
    });

媒体元素播放器以通常的方式实例化。我添加了'success'函数来监听“已结束”事件，然后获取我们的mediaElement对象并遍历DOM以查找海报图像层并将其重新打开。

Answer 2

我必须自己做这件事。这对我有用。该视频是以幻灯片形式显示的，因此如果正在播放视频，我也会暂停幻灯片播放，并在视频结束时再次启动它。

// set player buttons - pause/resume video


$('video').mediaelementplayer({

    features: ['playpause','current','progress','duration','volume'] ,

    success: function(media, node, player) {

        var events = ['play' , 'ended'];

        for (var i=0, il=events.length; i<il; i++) {


            media.addEventListener(events[0], function(e) {
                $('ul.aboutSlide').cycle('pause');
            });

            media.addEventListener(events[1], function(e) {
                $('ul.aboutSlide').cycle('resume');

                // Revert to the poster image when ended
                                $('.mejs-poster').show();
            });
        }
    }
})

mediaelement js - 完成播放后显示海报和播放图标

2 个答案: