JWPlayer填满整个屏幕，无论屏幕分辨率

我试图用jwplayer实现这样的事情：JWPlayer填满整个屏幕，无论屏幕分辨率

http://demosthenes.info/samples/polina.html

这里就是我有这么远：

正如你可以看到，视频很容易填满整个屏幕，但是如果您调整屏幕大小。视频也调整大小。希望有人能帮我解决这个问题。这里是我的代码snipper btw：

aspectratio: "1:1", 
    width: "100%", 
    stretching: "exactfit", 
    autostart: true, 
    repeat: true

我刚刚了解到最新版本的jwplayer不支持100％的高度值。

感谢

来源

2014-01-17 gunbalde06

这里是一个演示中，我放在一起做这个 - http://www.pluginsbyethan.com/github/

页面的源代码是：

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     body { 
      overflow-x: hidden; overflow-y: hidden; 
     } 
    </style> 
    <script> 
    document.ontouchstart = function(e){ 
     e.preventDefault(); 
    } 
    </script> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta content="yes" name="apple-mobile-web-app-capable" /> 
    <script type="text/javascript"> 
    if (navigator.userAgent.match(/iPhone/i) != null){ 
    document.write('<meta name="viewport" content="width=device-width;initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />'); 
    } else 
    if (navigator.userAgent.match(/iPad/i) != null){ 
    document.write('<meta name="viewport" content="width=device-width;initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />'); 
    } else { 
    document.write('<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,target-densityDpi=310" />'); 
    } 
    </script> 
    <script type="text/javascript"> 
    function hideURLbar() { 
     if (window.location.hash.indexOf('#') == -1) { 
      window.scrollTo(0, 1); 
     } 
    } 
    if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('Android') != -1 || navigator.userAgent.indexOf('iPad') != -1) { 
     addEventListener("load", function() { 
       setTimeout(hideURLbar, 0); 
     }, false); 
    } 
    </script> 
    <title>Hi!</title> 
    <link href="reset.css" rel="stylesheet" type="text/css" /> 
    <link href="video.css" rel="stylesheet" type="text/css" /> 
    <!-- html5shiv --> 
     <!--[if lt IE 9]> 
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://p.jwpcdn.com/6/7/jwplayer.js"></script> 
    </head> 
    <body> 
     <div id="video_bck"> 
     <div id="video"></div> 
     <script type="text/javascript">   
      $(document).ready(function($) { 
       var w_height = $(window).height(); 
       var w_width = $(window).width(); 
       if (navigator.userAgent.match(/iPad/i) != null || navigator.userAgent.match(/iPhone/i) != null || navigator.userAgent.match(/android/i) != null){ 
        jwplayer("video").setup({ 
         height: w_height, 
         width: w_width, 
         file: "cat.mp4", 
         stretching: "fill", 
         autostart: true, 
         repeat: "true", 
         skin: "six.xml", 
         events:{ 
          onPause: function(event) { 
           jwplayer('video').play(); 
          } 
         } 
        }); 
       } else { 
        jwplayer("video").setup({ 
         height: w_height, 
         width: w_width, 
         file: "cat.mp4", 
         controls: "false", 
         stretching: "fill", 
         autostart: true, 
         repeat: "true", 
         events:{ 
          onPause: function(event) { 
           jwplayer('video').play(); 
          } 
         } 
        }); 
       } 
       $(window).resize(function(e) { 
        var new_w_height = $(window).height(); 
        var new_w_width = $(window).width(); 
        jwplayer("video").resize(new_w_width, new_w_height); 
       }); 
      }); 
     </script> 
     </div> 
     <div id="box"> 
      <br /> 
      <br /> 
      Hello GitHub! 
     </div> 
    </body> 
</html>

希望它能帮助！

来源

2014-01-17 14:23:36 emaxsaun

JWPlayer填满整个屏幕，无论屏幕分辨率

回答

相关问题