HTML-страница со встроенными JWPlayers больше не работает - PullRequest
0 голосов
/ 13 октября 2011

РЕДАКТИРОВАТЬ: ПРОБЛЕМА РЕШЕНА. Это был код FitVids, заставляющий JWP не отображаться. Спасибо всем за помощь.

Я слишком долго смотрю на свой код и не могу понять, почему он не работает после того, как я сделал пару маленьких модов. Может ли один из вас, умный народ, проверить это и сообщить, что я сделал не так?

Предполагается, что на странице есть три встроенных JWPlayer со случайным видео. Используемый файл CSS должен быть тем же, что и для экранов рабочего стола, но у меня также есть файл для iphone.

http://www.billarga.com/newsite/

Код ниже показывает интеграцию одного из трех игроков.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
    <title>New Site</title>
    <script type="text/javascript" src="http://www.billarga.com/newsite/player/jwplayer.js"></script>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" media="all and (max-device-width: 480px)" href="http://www.billarga.com/newsite/css/iphone.css">
    <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="http://www.billarga.com/newsite/css/ipad-portrait.css">
    <link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="http://www.billarga.com/newsite/css/ipad-landscape.css">
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="http://www.billarga.com/newsite/css/ipad-landscape.css">
    <link rel="stylesheet" media="all and (min-width: 1824px)" href="http://www.billarga.com/newsite/css/screen.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="http://www.billarga.com/newsite/js/jquery.fitvids.js"></script>
    <script>
      $(document).ready(function(){
        $("#page-wrapper").fitVids();
      });
    </script>
</head>

<body>
    <div id="page-wrapper">
        <div id="video-wrapper">
            <div id="video">Video 1</div>
                <script type="text/javascript">
                    jwplayer('video').setup({
                    'flashplayer': 'http://www.billarga.com/newsite/player/player.swf',
                    'file': 'http://www.billarga.com/newsite/content/0000001/1.mp4',
                    'controlbar': 'bottom',
                    'width': '480',
                    'height': '360'
                    });
                </script>
        </div>
    </div>
</body>
</html>

CSS

  body {
    margin: 0;
    padding: 0;
    color: #000000;
    font-size: medium;
    }
    a           { color: blue; text-decoration: none; }
    a:visited       { color: blue; text-decoration: none; }
    a:hover             { color: blue; text-decoration: underline; }
    h1          { font-size: x-large; text-align: center; }
    #page-wrapper {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    }
    #video-wrapper {
    width: 100%;
    height: 360px;
    }
    #video {
    float: left;
    }

Ответы [ 2 ]

0 голосов
/ 13 октября 2011

Вы копировали и вставляли второго и третьего игроков из первого? Если это так, он может просто вставить один игрок на странице, пока вы не измените имена, например. видео_1, видео_2, видео_3.

0 голосов
/ 13 октября 2011

Вы можете попробовать поместить свой jwplayer в обратный вызов готовности документа jQuery, например:

<script>

$(document).ready(function(){
    $("#page-wrapper").fitVids();

    jwplayer('video').setup({
        'flashplayer': 'http://www.billarga.com/newsite/player/player.swf',
        'file': 'http://www.billarga.com/newsite/content/0000001/1.mp4',
        'controlbar': 'bottom',
        'width': '480',
        'height': '360'
    });
});

</script>
...