2014-01-17 1 views
3

Я пытаюсь добиться чего-то вроде этого с помощью jwplayer:JWPlayer, чтобы заполнить весь экран независимо от разрешения экрана

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

Вот что я получил до сих пор:

http://johnkimwell.com/videobg/

Как вам может видеть, видео легко заполняет весь экран, но если вы измените размер экрана. Видео также изменяется. Надеюсь, кто-то может помочь мне в этом. Вот мой код Snipper кстати:

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> 

Надеется, что это помогает!

Смежные вопросы