2014-01-17 5 views
3

:JWPlayer은 화면 해상도에 관계없이 전체 화면을 채우기 위해 내가 jwplayer 사용하여이 뭔가를 달성하기 위해 노력하고

http://johnkimwell.com/videobg/

당신과 같이

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

내가 지금까지 가지고 무엇을 비디오가 전체 화면을 쉽게 채우지 만 화면의 크기를 조정하면 쉽게 볼 수 있습니다. 동영상의 크기도 조정됩니다. 누군가가 이걸 도와 줄 수 있기를 바랍니다. 여기 내 코드 snipper은 BTW입니다 :

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

난 그냥 jwplayer의 최신 버전은 100 %의 높이 값을 지원하지 않는 것을 배웠다.

감사

다음

답변

2

내가 않는 것을 함께 넣어 데모 인이 - 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> 

는 희망이 도움이!

관련 문제