如何將MediaElement播放器放在fancybox內？

Question

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將整個頁面作爲內容，而不是視頻。

任何想法是什麼錯？

Answer 1

這將是更好地加載視頻動態，而不是內聯嵌入它的，所以我會做：

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

注意我們鏈接到（MP4 ）視頻直接在href屬性中。另請注意（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.js v2.13.2（最新提供的cdnjs）我想總是建議更新到目前爲止的最新版本（v2.14.2），其中包括錯誤修復。
• 該演示還使用fancyBox v2.1.15並僅涵蓋mp4視頻文件。

對於一個完整詳細的代碼解釋，包括已知問題和解決方法，你可以參考這個教程http://www.picssel.com/play-mp4-videos-with-mediaelement-js-in-fancybox/

Answer 2

您好我想你應該刪除的哈希值進行的id：中

<div id="fancybox">代替<div id="#fancybox">

Answer 3

我試圖做使用MediaElement的WordPress插件這樣的事情。我結束了類似：

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