javascript Fancybox 弹出窗口 + JSVideo HTML5 视频 - 为什么我会丢失控件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4271765/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fancybox popup + JSVideo HTML5 Video - Why do i lose my controls?
提问by Jerrold
I'm using JQuery plugins Fancybox and JSVideo, ultimately i want a video to popup via fancybox and have the HTML5 video play in that popup
我正在使用 JQuery 插件 Fancybox 和 JSVideo，最终我希望通过fancybox 弹出一个视频，并在该弹出窗口中播放 HTML5 视频
I have this working - the only problem is that the video controls are not what i expect...it does not have the jsvideo controls..i dont know if its a fancybox or a css thing, or both
我有这个工作 - 唯一的问题是视频控件不是我期望的......它没有jsvideo控件......我不知道它是fancybox还是css的东西，或者两者兼而有之
The html is simple - its a thumbnail that points to javascript
html 很简单——它是一个指向 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>
and the javascript looks like this:
和 javascript 看起来像这样：
<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>
the name in the html link is just the full path of the file, so i have an mp4 somewhere on the server.
html 链接中的名称只是文件的完整路径，所以我在服务器上的某个地方有一个 mp4。
There are controls..but i think its the default HTML5 video controls, and not the jsvideo controls...
有控件......但我认为它是默认的 HTML5 视频控件，而不是 jsvideo 控件......
If i take fancybox out of it - and just put the jsvideo inline like this
如果我把fancybox从里面拿出来——然后像这样将jsvideo内联
<!-- 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 -->
Video with proper controls come in - is it because im trying to stuff a into the fancybox content?
带有适当控件的视频进来了 - 是因为我试图将 a 塞进fancybox内容吗？
Thanks
谢谢
采纳答案by heff
Peter was right about the onComplete. If it's forcing the Flash player, then VideoJS is at least running, whereas it wasn't before if you were seeing the browser's default controls. It only forces the Flash fallback if it doesn't think it can play the file.
彼得关于 onComplete 是对的。如果它强制 Flash 播放器，那么 VideoJS 至少正在运行，而如果您看到浏览器的默认控件，则它不会运行。如果它认为它不能播放文件，它只会强制 Flash 回退。
VideoJS uses the the "type" attribute to check, which it looks like you've removed. Add back in:
VideoJS 使用“type”属性进行检查，看起来您已将其删除。重新添加：
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
to the MP4, and you might see it work. You'll want to add the type back to the other sources as well. Hope that helps.
到 MP4，你可能会看到它的工作。您还需要将该类型添加回其他来源。希望有帮助。
回答by Peter ?rneholm
Try putting VideoJS.setupAllWhenReady();in $.fancybox.onComplete.
尝试把VideoJS.setupAllWhenReady();在$.fancybox.onComplete。
The content of your fancybox is probably not in the DOM when jsVideo tries to apply the video controls.
当jsVideo 尝试应用视频控件时，您的fancybox 的内容可能不在DOM 中。
Like this:
像这样：
<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>
Edit:This plugin might be relevant to use: http://videojs.com/jquery/
编辑：此插件可能与使用有关：http: //videojs.com/jquery/
回答by techm
I hope you already got the fix. You were missing other formats and type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'tag. It worked for me. :)
我希望你已经得到了修复。您缺少其他格式和type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'标签。它对我有用。:)
回答by user1106485
This is what worked for me. You'll have to customize to fit your needs, of course.
这对我有用。当然，您必须进行自定义以满足您的需求。
Code in head:
头部代码：
<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>
Image Link:
图片链接：
<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>
回答by jolly
<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>
回答by Purus
I was trying for this too and finally had this work for me by using the below approach.
我也在为此努力，最终通过使用以下方法为我完成了这项工作。
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>
回答by kmas
To write this script in a more simple style, you have to use the beforeLoad property of fancybox. It is in that redefination that you define your content. In my case, the attr element contains the name of the file, thus I can set multiple video format source.
要以更简单的风格编写此脚本，您必须使用fancybox 的beforeLoad 属性。正是在这种重新定义中，您才能定义您的内容。就我而言， attr 元素包含文件名，因此我可以设置多个视频格式源。
$("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(); }
});
