jquery를 사용하여 fancybox에서 .mov 파일을 재생하는 방법은 무엇입니까?

Question

내 목표는 이미 내 서버에 업로드 된 mov 파일을 재생하는 것이 었습니다. fancybox 및 jquery를 사용하여 프레임을 팝업으로 표시하는 것이 좋을 것입니다. 그러나 내가 SWF 형을 위해 이러한 코드에 행운 대체 .MOV으로 시도 :

<a class="various" href="Poem.MOV">Play movie</a> 

를이 JQuery와 함께 fancybox 웹 사이트의 제안 목록에서 :

<script src="jquery.js"></script> 
<script type="text/javascript" src="jquery.fancybox.js"></script> 
<script> 
     $(document).ready(function() { 
      $(".various").fancybox({ 
       maxWidth : 800, 
       maxHeight : 600, 
       fitToView : false, 
       width  : '70%', 
       height  : '70%', 
       autoSize : false, 
       closeClick : false, 
       openEffect : 'none', 
       closeEffect : 'none' 
      }); 
     }); 
    </script> 

이것은 단지 다른 날을 보내 그 mov 파일을 재생하는 웹 페이지. fancybox 인포 프레임에서 비디오를 터뜨림으로써 성공적으로 작동했던 다른 가장 가까운 코드가 재생되지 않거나 전혀 표시되지 않습니다. 그것은 단지 영화를 재생하지 않고 흰색 프레임에 나타났다 :

HTML :

<a class="fancybox" data-type="swf" href="Poem.MOV" title="Poem">Play Movie</a> 

JAVASCRIPT : 이것은 우리 자신의 서버 사용 fancybox에 .MOV 재생 가능한 경우

<script> 
jQuery(document).ready(function($){ 
    $(".fancybox").on("click", function(){ 
     $.fancybox({ 
      href: this.href, 
      type: $(this).data("type") 
     }); // fancybox 
     return false 
    }); // on 
}); // ready 
</script> 

가 궁금해 YouTube 또는 Vimeo와 같은 타사 서버를 사용하지 않아도됩니다. 시간 내 줘서 고마워.

Answer 1

당신은 .mov 또는 다른 비디오 포맷을 재생할 수 fancybox으로 JWplayer player를 사용할 수 있습니다.

$(".various").fancybox({ 
     fitToView: true, 
     content: '<div id="myJWPlayer">Loading the player ...</div>', 
     scrolling: 'no', 
     afterShow: function() { 
      var video_href= j(this.element).data('url'); 
      $('#myJWPlayer').css({height:'400px',width:'500px'}); 
      setTimeout(function(){ 
      jwplayer('myJWPlayer').setup({ 
       'file' : video_href, 
       "autostart" : "true", 
       "controlbar" : "bottom", 
       "flashplayer" : "url-to-/jwplayer.flash.swf", 
       "volume" : "70", 
       "width" : 500, 
       "height" : 400, 
       "mute" : "false", 
       "stretching" : "fill" 
      }); 
      updateViewTime(vid); 
      },100); 
     } 
     });