Como ter o player MediaElement dentro do fancybox?
-
12-12-2019 - |
Pergunta
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();
}
});
});
Não há erros no firebug.O problema é que o fancybox tem a página inteira como conteúdo, mas não o vídeo.
Alguma idéia do que está errado?
Solução
Seria melhor carregar o vídeo dinamicamente em vez de incorporá-lo in-line, então eu faria:
<a title="video title" data-poster="images/thumb.jpg" href="videos/video.mp4" class="fancy_video"><img alt="" src="images/thumb.jpg" /></a>
Perceber estamos vinculando ao vídeo (mp4) diretamente no href
atributo.Observe também o (HTML5) data-poster
atributo, que indica a imagem em miniatura que será exibida dentro do contêiner de vídeo quando ele estiver ocioso.Em seguida, o código jQuery básico:
// 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
Ver JSFIDDLE
NOTAS :
- Embora o jsfiddle use mediaelement.js v2.13.2 (o mais recente disponível em cdnjs), eu sempre recomendaria atualizar para a versão mais recente (v2.14.2 até agora) que inclui correções de bugs.
- A demonstração também usa o fancyBox v2.1.15 e cobre apenas arquivos de vídeo mp4.
Para obter uma explicação completa e detalhada do código, incluindo problemas conhecidos e soluções alternativas, você pode consultar este tutorial http://www.picssel.com/play-mp4-videos-with-mediaelement-js-in-fancybox/
Outras dicas
Olá, acho que você deveria remover o hash do valor do id:
<div id="fancybox">
em vez de <div id="#fancybox">
Eu estava tentando fazer algo assim usando o plugin mediaelement wordpress.Acabei com algo como:
$('a.fancybox').fancybox({
'afterShow': function() {
mejs.$('video').mediaelementplayer();
}
});