Fancybox Popup + JSVideo HTML5 Vídeo - Por que eu perco meus controles?
https://stackoverflow.com/questions/4271765
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Estou usando o JQuery Plugins FancyBox e JSvideo, em última análise, quero que um vídeo seja exibido via FancyBox e tenha o vídeo HTML5 no que o pop -up
Eu tenho esse funcionamento - o único problema é que os controles de vídeo não são o que eu espero ... ele não tem os controles do JSVideo ... não sei se é um Fancybox ou uma coisa de CSS, ou ambos
O HTML é simples - é uma miniatura que aponta para JavaScript
<a title="test" name="test" href=""javascript:;" class="fancyvideo5"><img alt="kirk monteux micro-agentur.de grafik design" src="http://www.micro-agentur.com/media/bilder/grafik220.jpg" /></a>
E o JavaScript se parece com o seguinte:
<script type="text/javascript">
$(document).ready(function () {
$("a.fancyvideo5").click(function () {
var url = $(this).attr('name');
$.fancybox({
'padding': 7,
'overlayOpacity': 0.7,
'autoDimensions': false,
'width': 640,
'height': 480,
'content': '<div><div class="video-js-box vim-css">' +
'<video id="example_video_1" class="video-js" width="635" height="475" controls="controls" preload="auto" poster="' + url + '.png">' +
'<source src="' + url + '.mp4" />' +
'<source src="' + url + '.webm" />' +
'<source src="' + url + '.ogv" />' +
'<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' +
'<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' +
'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' +
'<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' +
'<param name="allowfullscreen" value="true" />' +
'<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' +
'<!-- Image Fallback. Typically the same as the poster image. -->' +
'<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' +
' title="No video playback capabilities." />' +
'</object>' +
'</video>' +
'</div></div>',
'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); },
'onClosed': function () { $("#fancybox-inner").empty(); }
});
return false;
}); // fancyvideo
VideoJS.setupAllWhenReady();
});
</script>
O nome no link HTML é apenas o caminho completo do arquivo, então eu tenho um MP4 em algum lugar do servidor.
Existem controles ... mas acho que é o controles de vídeo HTML5 padrão, e não os controles do JSVideo ...
Se eu tirar o FancyBox - e apenas colocar o JSVideo em linha assim
<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video id="example_video_1" class="video-js" width="320" height="240" controls="controls" preload="auto" poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="264" type="application/x-shockwave-flash"
data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["http://video-js.zencoder.com/oceans-clip.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}' />
<!-- Image Fallback. Typically the same as the poster image. -->
<img src="http://video-js.zencoder.com/oceans-clip.png" width="640" height="264" alt="Poster Image"
title="No video playback capabilities." />
</object>
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
<a href="http://video-js.zencoder.com/oceans-clip.mp4">MP4</a>,
<a href="http://video-js.zencoder.com/oceans-clip.webm">WebM</a>,
<a href="http://video-js.zencoder.com/oceans-clip.ogv">Ogg</a><br>
<!-- Support VideoJS by keeping this link. -->
<a href="http://videojs.com">HTML5 Video Player</a> by VideoJS
</p>
</div>
<!-- End VideoJS -->
Vídeo com controles adequados entra - é porque estou tentando encher um conteúdo da FancyBox?
Obrigado
Solução
Peter estava certo sobre o Oncomplete. Se estiver forçando o flash player, o vídeojs está pelo menos em execução, enquanto não foi antes se você estava vendo os controles padrão do navegador. Ele apenas força o fallback do flash se não achar que pode reproduzir o arquivo.
O VideoJS usa o atributo "Type" para verificar, que parece que você removeu. Adicionar de volta em:
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
Para o MP4, e você pode ver funcionar. Você também deseja adicionar o tipo de volta às outras fontes. Espero que ajude.
Outras dicas
Tente colocar VideoJS.setupAllWhenReady(); dentro $.fancybox.onComplete.
O conteúdo do seu FancyBox provavelmente não está no DOM quando o JSVideo tenta aplicar os controles de vídeo.
Assim:
<script type="text/javascript">
$(function () {
$("a.fancyvideo5").click(function () {
var url = $(this).attr('name');
$.fancybox({
'padding': 7,
'overlayOpacity': 0.7,
'autoDimensions': false,
'width': 640,
'height': 480,
'content': '<div><div class="video-js-box vim-css">' +
'<video id="example_video_1" class="video-js" width="635" height="475" controls="controls" preload="auto" poster="' + url + '.png">' +
'<source src="' + url + '.mp4" />' +
'<source src="' + url + '.webm" />' +
'<source src="' + url + '.ogv" />' +
'<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->' +
'<object id="flash_fallback_1" class="vjs-flash-fallback" width="640" height="480" type="application/x-shockwave-flash"' +
'data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">' +
'<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />' +
'<param name="allowfullscreen" value="true" />' +
'<param name="flashvars" value=\'config={"playlist":["' + url + '.png", {"url": "http://video-js.zencoder.com/oceans-clip.mp4","autoPlay":false,"autoBuffering":true}]}\' />' +
'<!-- Image Fallback. Typically the same as the poster image. -->' +
'<img src="' + url + '.png" width="632" height="15" alt="Poster Image"' +
' title="No video playback capabilities." />' +
'</object>' +
'</video>' +
'</div></div>',
'onComplete': function () {
$("#fancybox-inner").css({ 'overflow': 'hidden' });
VideoJS.setupAllWhenReady();
},
'onClosed': function () { $("#fancybox-inner").empty(); }
});
return false;
}); // fancyvideo
});
</script>
Editar: Este plugin pode ser relevante para usar: http://videojs.com/jquery/
Espero que você já tenha conseguido a correção. Você estava perdendo outros formatos e type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' marcação. Funcionou para mim. :)
Isto é o que funcionou para mim. Você terá que personalizar para atender às suas necessidades, é claro.
Código na cabeça:
<script type="text/javascript">
$(document).ready(function () {
$("a.fancyvideo5").click(function () {
var url = $(this).attr('name');
$.fancybox({
'padding': 7,
'overlayOpacity': 0.7,
'autoDimensions': false,
'content': '<div class="video-js-box">' +
'<video class="video-js" width="635" height="475" controls preload>' +
'<source src="' + url + '"' + 'type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"' + '/> ' +
'</video>' +
'</div>',
'beforeShow': function () {
VideoJS.setupAllWhenReady();
},
});
});
});
</script>
Link de imagem:
<a class="fancyvideo5" name="video/animation/animation_zemibank.mp4"><img src="images/misc/spotlight_images/spotlight_animation.png" width="248" height="145" alt="Film" /></a>
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video">
<a href="video/video-2011-11-27-20-26-40.mp4">video</a>
</p>
</div>
Eu estava tentando isso também e finalmente tive esse trabalho para mim usando a abordagem abaixo.
jQuery(document).ready(function(){
jQuery("a#videolink").fancybox({
frameWidth: 800,
frameHeight: 450,
overlayShow: true,
overlayOpacity: 0.7
});
});
<a id="videolink" href="#MYID" title="Test Video">
<img src="mp4test.jpg" width="248" height="145" />
</a>
<div style="display:none">
<video id="MYID" poster="mp4test.jpg" class="video-js vjs-default-skin"
controls preload="auto" width="300" height="300" data-setup="{}" >
<source src="mp4test.mp4" type='video/mp4'>
</video>
</div>
Para escrever este script em um estilo mais simples, você deve usar a propriedade Beforeload do FancyBox. É nessa redefinição que você define seu conteúdo. No meu caso, o elemento att contém o nome do arquivo, portanto, posso definir várias fontes de formato de vídeo.
$("a.fancybox_video").fancybox({
'padding': 7,
'overlayOpacity': 0.7,
'autoDimensions': false,
'width': 640,
'height': 480,
'beforeLoad': function() {
this.content = '<video width="640" height="480" controls="controls">'+
'<source src="' + $(this.element).attr('name') + '.mp4" type="video/mp4"></source> ' +
'<source src="' + $(this.element).attr('name') + '.webm" type="video/webm"></source>' +
'Your browser does not support the HTML 5 video tag'+
'</video>';
},
'onComplete': function () { $("#fancybox-inner").css({ 'overflow': 'hidden' }); },
'onClosed': function () { $("#fancybox-inner").empty(); }
});
