无论屏幕分辨率如何，JWPlayer 都会填满整个屏幕答案

【问题标题】：JWPlayer to fill entire screen regardless of screen resolution无论屏幕分辨率如何，JWPlayer 都会填满整个屏幕
【发布时间】：2014-02-06 06:22:05
【问题描述】：

我正在尝试使用 jwplayer 来实现这样的目标：

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

这是我目前得到的：

http://johnkimwell.com/videobg/

如您所见，视频很容易填满整个屏幕，但如果您调整屏幕大小。视频也会调整大小。希望有人可以帮助我解决这个问题。这是我的代码截图：

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

刚刚得知最新版的jwplayer不支持100%的高度值。

谢谢

【问题讨论】：

标签： video fullscreen jwplayer

【解决方案1】：

这是我整理的一个演示 - 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>

希望对您有所帮助！

【讨论】：