Question

我正在尝试使用jwplayer实现类似的东西：

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

这是我到目前为止所得到的：

正如您所看到的，视频可以轻松填满整个屏幕但是如果您调整屏幕大小。视频也会调整大小。希望有人可以帮助我。这是我的代码片段btw：

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

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

由于

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

希望它有所帮助！

无论屏幕分辨率如何，JWPlayer都可以填满整个屏幕

1 个答案: