FancyBox Popup + JSVideo HTML5ビデオ - なぜコントロールを失うのですか？
https://stackoverflow.com/questions/4271765
-
28-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
jqueryプラグインファンシーボックスとjsvideoを使用しています。最終的には、ファンシーボックスを介してポップアップして、そのポップアップでHTML5ビデオをプレイしてもらいたいです
私はこれが機能しています - 唯一の問題は、ビデオコントロールが私が期待しているものではないということです...それはJSVideoコントロールを持っていません..私はそのファンシーボックスか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があります。
コントロールがありますが、JSVIDEOコントロールではなく、デフォルトのHTML5ビデオコントロールだと思います...
ファンシーボックスをそれから取り出した場合 - そして、このように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 -->
適切なコントロールを備えたビデオが入っています - それは私がファンシーボックスコンテンツに詰め込もうとしているからですか？
ありがとう
解決
ピーターはoncompleteについて正しかった。フラッシュプレーヤーを強制している場合、VideoJSは少なくとも実行されていますが、ブラウザのデフォルトのコントロールが表示されているかどうかは以前ではありませんでした。ファイルを再生できるとは思わない場合にのみ、フラッシュフォールバックを強制します。
VideoJSは、「タイプ」属性を使用してチェックします。これは削除したように見えます。追加：
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
MP4に、そしてあなたはそれが機能するのを見るかもしれません。他のソースにもタイプを追加してください。それが役立つことを願っています。
他のヒント
入れてみてください 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/
あなたがすでに修正を得たことを願っています。他のフォーマットがありませんでした type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' 鬼ごっこ。それは私のために働いた。 :)
これが私のために働いたものです。もちろん、ニーズに合わせてカスタマイズする必要があります。
頭のコード：
<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>
<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>
私もこれを試していましたが、以下のアプローチを使用して、ついにこの作業を行いました。
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>
このスクリプトをよりシンプルなスタイルで書くには、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(); }
});
所属していません StackOverflow
