当前位置：文江博客话题详情

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

发布于 2024-11-25 12:02:50 字数 49 浏览 1 评论 0原文

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

有人尝试实现这一目标吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遇见了你 2024-12-02 12:02:50

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

    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();
            });
        }
    });

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

Yes, just tried it myself for a project where the client wanted the poster image to come back when the video had completed. Here's my code:

    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();
            });
        }
    });

The mediaelement player is instantiated in the usual way. I've added the 'success' function to listen for the "ended" event, which then takes our mediaElement object and traverses the DOM to find the poster image layer and switch it back on.

回复收藏 0 原文

时光倒影 2024-12-02 12:02:50

我只得自己做这件事。
这对我有用。
该视频以幻灯片形式显示，因此如果视频正在播放，我也会暂停幻灯片放映，并在视频结束时重新开始播放。

// 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();
            });
        }
    }
})

I just had to do this myself.
This worked for me.
The video is in a slideshow, so i'm also pausing slideshow if video is playing, and starting it again on end of video.

// 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();
            });
        }
    }
})

回复收藏 0 原文

~没有更多了~