Fancybox彈出式菜單+ JSVideo HTML5視頻 - 爲什麼我失去了我的控件？

我使用jQuery插件的fancybox和JSVideo，最終我希望有一個視頻，通過彈出的fancybox並在該彈出窗口中的HTML5視頻播放Fancybox彈出式菜單+ JSVideo HTML5視頻 - 爲什麼我失去了我的控件？

我有這樣的工作 - 唯一的問題是，視頻控件不是什麼我期待...它不具備jsvideo controls..i不知道如果它是一個的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在服務器上的某個地方。

有controls..but我認爲它的默認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內容？

感謝

來源

2010-11-24 Jerrold

彼得是對有關的onComplete。如果它強制Flash播放器，那麼VideoJS至少會運行，而如果您看到瀏覽器的默認控件則不是以前。如果它不認爲它可以播放文件，它只會強制閃回。

VideoJS使用「type」屬性來檢查，它看起來像你已經刪除。添加回：

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

到MP4，你可能會看到它的工作。您還需要將該類型添加回其他來源。希望有所幫助。

來源

2010-11-25 19:25:48 heff

這樣做 - 謝謝你們是男性之間的國王 – Jerrold 2010-11-27 19:13:48

嘗試把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/

來源

2010-11-24 21:48:45

nope - moving VideoJS.setupAllWhenReady（）;不工作 - 一些奇怪的行爲 - 它強制流式播放器（閃回回退）呈現，而不是HTML5視頻。任何其他想法？謝謝你 – Jerrold 2010-11-24 22:03:15

我希望你已經得到了解決。您錯過了其他格式和type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'標記。它爲我工作。 :)

來源

2011-05-03 06:52:20 techm

這是爲我工作。當然，您必須自定義以適應您的需求。

代碼頭：

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

來源

2012-01-03 17:14:09 user1106485

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

來源

2012-05-04 13:55:17 jolly

wthe相同的java腳本不能在鉻合作 – jolly 2012-05-04 13:58:02

我是想這個也是一樣，最後通過使用下面的方法有這個工作對我來說。

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>

來源

2013-02-26 12:43:17 Purus

要以更簡單的樣式編寫此腳本，您必須使用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(); } 
});

來源

2013-04-17 10:34:52 kmas

Fancybox彈出式菜單+ JSVideo HTML5視頻 - 爲什麼我失去了我的控件？

回答

相關問題