1

HTML：

{% for movie in videos %}
    <div class="list_item">            
        <a class="open-fancybox" href="#fancybox">Play</a>
        <div id="fancybox">
          <video id="#mediaelement" src="{{ movie.file }}" preload=none></video>
        </div>      
    </div>   
{% endfor %}

JS：

$(document).ready(function() {           

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

});

ファイアバグにエラーはありません。問題は、fancyboxにはページ全体がコンテンツとして含まれているが、ビデオは含まれていないことです。

何が悪いのか分かりますか？

4

3 に答える 3

3

ビデオをインラインで埋め込むのではなく、動的にロードする方がよいので、次のようにします。

<a title="video title" data-poster="images/thumb.jpg" href="videos/video.mp4" class="fancy_video"><img alt="" src="images/thumb.jpg" /></a>

href属性内で（mp4）ビデオに直接リンクしていることに注意してください。また、（HTML5）data-poster属性にも注意してください。これは、アイドル状態のときにビデオコンテナ内に表示されるサムネイル画像を示します。次に、基本的なjQueryコード：

// 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

JSFIDDLEを参照してください

注：

  • jsfiddleはmediaelement.jsv2.13.2（cdnjsで入手可能な最新のもの）を使用していますが、バグ修正を含む最新バージョン（これまでのところv2.14.2）に更新することを常にお勧めします。
  • デモもfancyBoxv2.1.15を使用し、mp4ビデオファイルのみをカバーしています。

既知の問題と回避策を含む完全な詳細なコードの説明については、このチュートリアルhttp://www.picssel.com/play-mp4-videos-with-mediaelement-js-in-fancybox/を参照してください。

于 2014-06-24T16:50:10.003 に答える
2

こんにちは私はあなたがid値からハッシュを削除する必要があると思います：

<div id="fancybox">それ以外の<div id="#fancybox">

于 2012-07-06T12:20:21.030 に答える
1

私はmediaelementワードプレスプラグインを使用してこのようなことをしようとしていました。私は次のようなものになりました：

$('a.fancybox').fancybox({
    'afterShow': function() {
        mejs.$('video').mediaelementplayer();
    }
});
于 2013-01-31T17:54:26.647 に答える