我正在使用JQuery插件Fancybox和JSVideo，最终我希望通过fancybox弹出视频并在弹出窗口中播放HTML5视频
我有这个工作 - 唯一的问题是视频控件不是我所期望的...它没有jsvideo控件..我不知道它是一个fancybox还是一个css的东西，或者两者兼而有之
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>
，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>
html链接中的名称只是文件的完整路径，所以我在服务器上的某处有一个mp4。
有控件..但我认为它是默认的HTML5视频控件，而不是jsvideo控件......
如果我从中取出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 -->
带有适当控件的视频进来 - 这是因为我试图填充fancybox内容吗？
由于
答案 0 :(得分：2)
尝试将VideoJS.setupAllWhenReady();放入$.fancybox.onComplete。
当jsVideo尝试应用视频控件时，您的fancybox内容可能不在DOM中。
喜欢这样：
<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>
修改：此插件可能与使用相关：http://videojs.com/jquery/
答案 1 :(得分：2)
彼得对onComplete是正确的。如果它正在强制使用Flash播放器，那么VideoJS至少会运行，而如果您看到浏览器的默认控件则不会。如果它不认为它可以播放文件，它只会强制Flash回退。
VideoJS使用“type”属性进行检查，看起来你已经删除了。加入：
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
到MP4，您可能会看到它有效。您还希望将类型添加回其他来源。希望有所帮助。
答案 2 :(得分：1)
我希望你已经得到了修复。您缺少其他格式和type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'标记。它对我有用。 ：）
答案 3 :(得分：1)
这对我有用。当然，您必须进行自定义以满足您的需求。
代码：
<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>
图片链接：
<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>
答案 4 :(得分：0)
<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>
答案 5 :(得分：0)
我也在尝试这一点，最后通过使用以下方法为我工作。
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>
答案 6 :(得分：0)
要以更简单的方式编写此脚本，您必须使用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(); }
});