Jquery 如何在fancybox中安装MediaElement播放器？

HTML:

firebug中没有错误。问题是fancybox将整个页面作为内容，而不是视频

---

你知道怎么回事吗？

嗨，我想你应该删除id值中的散列：

---

我认为您应该删除id值中的散列，而不是

嗨：

---

我没有使用mediaelement wordpress插件，而是尝试这样做。我的结局是：

$(document).ready(function() {           

        $('.open-fancybox').fancybox({
            'afterShow': function() {
                $('#mediaelement').mediaelementplayer();
            }
        });

});

---

我试着用mediaelement wordpress插件做类似的事情。我的结局是：

$(document).ready(function() {           

        $('.open-fancybox').fancybox({
            'afterShow': function() {
                $('#mediaelement').mediaelementplayer();
            }
        });

});

---

最好是动态加载视频，而不是内嵌视频，因此我会：

$('a.fancybox').fancybox({
    'afterShow': function() {
        mejs.$('video').mediaelementplayer();
    }
});

看

注:

尽管JSFIDLE使用cdnjs上提供的最新版本mediaelement.js v2.13.2，但我始终建议更新到目前为止包含bug修复的最新版本v2.14.2。 该演示还使用fancyBox v2.1.15，仅涵盖mp4视频文件。

---

有关完整详细的代码解释，包括已知问题和解决方法，您可以参考本教程

，最好动态加载视频，而不是内嵌视频，因此我会：

$('a.fancybox').fancybox({
    'afterShow': function() {
        mejs.$('video').mediaelementplayer();
    }
});

看

注:

尽管JSFIDLE使用cdnjs上提供的最新版本mediaelement.js v2.13.2，但我始终建议更新到目前为止包含bug修复的最新版本v2.14.2。 该演示还使用fancyBox v2.1.15，仅涵盖mp4视频文件。

---

有关完整详细的代码解释，包括已知问题和解决方法，您可以参考本教程

@JFK如果您想将此作为答案共享，我将接受它。@JFK如果您想将此作为答案共享，我将接受它。

// set some general variables
var $video_player, _player, _isPlaying = false;
jQuery(document).ready(function ($) {
    jQuery(".fancy_video").fancybox({
        // set type of content (we are building the HTML5 <video> tag as content)
        type: "html",
        // other API options
        scrolling: "no",
        fitToView: false,
        autoSize: false,
        beforeLoad: function () {
            // build the HTML5 video structure for fancyBox content with specific parameters
            this.content = "<video id='video_player' src='" + this.href + "' poster='" + $(this.element).data("poster") + "' width='360' height='360' controls='controls' preload='none' ></video>";
            // set fancyBox dimensions
            this.width = 360; // same as video width attribute
            this.height = 360; // same as video height attribute
        },
        afterShow: function () {
            // initialize MEJS player
            var $video_player = new MediaElementPlayer('#video_player', {
                defaultVideoWidth: this.width,
                defaultVideoHeight: this.height,
                success: function (mediaElement, domObject) {
                    _player = mediaElement; // override the "mediaElement" instance to be used outside the success setting
                    _player.load(); // fixes webkit firing any method before player is ready
                    _player.play(); // autoplay video (optional)
                    _player.addEventListener('playing', function () {
                        _isPlaying = true;
                    }, false);
                } // success
            });
        },
        beforeClose: function () {
            // if video is playing and we close fancyBox
            // safely remove Flash objects in IE
            if (_isPlaying && navigator.userAgent.match(/msie [6-8]/i)) {
                // video is playing AND we are using IE
                _player.remove(); // remove player instance for IE
                _isPlaying = false; // reinitialize flag
            };
        }
    });
}); // ready