2014-04-19 6 views
2

는 SWF 대체가 응답 할, 그리고 나는 다음 코드를 사용하여 응답 할 수 얻을 관리해야 :Videojs 내가 현재 <strong><a href="http://videojs.com/" rel="nofollow">videojs</a></strong> 플러그인을 사용하고

JSFIDDLE DEMO

JS :

videojs.options.flash.swf = "../../js/video-js.swf"; 

// Once the video is ready 
videojs("#video").ready(function(){ 

    var myPlayer = this; // Store the video object 
    var aspectRatio = 4/3; // Make up an aspect ratio 

    function resizeVideoJS(){ 
     // Get the parent element's actual width 
     var width = document.getElementById(myPlayer.R).parentElement.offsetWidth; 
     // Set width to fill parent element, Set height 
     myPlayer.width(width).height(width * aspectRatio); 
    } 

    resizeVideoJS(); // Initialize the function 
    jQuery(window).on('resize', function() { 
     resizeVideoJS(); // Call the function on resize 
    }) 
}); 

HTML :

요청으로 10
<div class="feature-video"> 
     <video id="video" class="video-js vjs-default-skin" controls preload="none" 
       poster="http://video-js.zencoder.com/oceans-clip.png" 
       data-setup="{}"> 
      <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> 
      <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> 
      <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> 
    </video> 
</div> 
+0

jsfiddle 링크 –

+0

완료하시기 바랍니다. –

답변

1

확인이 밖으로

fiddle link

<div class="feature-video"> 
      <video id="video" class="video-js vjs-default-skin vjs-fullscreen" controls preload="none" width="auto" height="auto" poster="http://video-js.zencoder.com/oceans-clip.png" 
        data-setup="{}"> 
       <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> 
       <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> 
       <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> 
     </video> 
    </div> 
관련 문제