2014-04-19 29 views
2

我目前使用的videojs插件,我設法得到它的響應與下面的代碼:Videojs使SWF後備響應

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:

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