ファンシーボックスポップアップ+ JSVideo HTML5ビデオ - なぜコントロールを失うのですか？

Question

私は最終的に私はこの作業を持っているfancyboxを経由して、ポップアップにビデオをしたいし、そのポップアップで

をHTML5ビデオ再生を持って、jQueryのプラグインFancyboxとJSVideoを使用しています - 唯一の問題は、ビデオコントロールがものではないということです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>  

を指し、そのサムネイル - 私はそれがjsvideo controls..iはそのfancyboxやCSSのもの、またはその両方

HTMLはシンプルであれば知らない持っていない...期待します

と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があります。

あり、私はそれからfancyboxを取るなら...私はそのデフォルトHTML5のビデオコントロール、およびないjsvideoコントロールを考える

をcontrols..butている - そしてちょうどこの

よう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 --> 

ビデオは適切なコントロールが付属しています - 私はファンシーボックスのコンテンツに詰め込もうとしているからですか？

おかげ

Answer 1

ピーターは、onCompleteの程度正しかったです。 Flash Playerを強制すると、VideoJSは少なくとも動作していますが、ブラウザのデフォルトコントロールが表示されていたのはそれ以前ではありませんでした。それは、ファイルを再生できるとは思わない場合にのみ、フラッシュフォールバックを強制します。

VideoJSは「タイプ」属性を使用して、削除したように見えます。再度入力してください：

type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' 

をMP4に追加すると、動作することがあります。タイプを他のソースにも追加したいと思うでしょう。希望が役立ちます。

Answer 2

は$.fancybox.onCompleteでVideoJS.setupAllWhenReady();を入れてみてください。

jsVideoがビデオコントロールを適用しようとすると、ファンシーボックスのコンテンツが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/

Answer 3

私はあなたが既に修正を得たことを願っています。あなたは他のフォーマットとtype='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'タグが欠けていました。それは私のために働いた。 :)

Answer 4

これは私のために働いたものです。もちろん、ニーズに合わせてカスタマイズする必要があります。頭の中で

コード：

<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> 

Answer 5

<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> 

Answer 6

私はこのためにしようとしていたが、あまりにも、最終的に以下のアプローチを使用して私のためにこの仕事を持っていました。

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> 

Answer 7

このスクリプトをよりシンプルなスタイルで書くには、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(); } 
});