2011-10-13 57 views
-2

編輯:問題已解決。這是導致JWP不顯示的FitVids代碼。感謝大家的幫助。嵌入式JWPlayers無法工作的HTML頁面

我一直在盯着我的代碼太長,無法弄清楚爲什麼它沒有工作後,我做了幾個小mods。你們中的一個聰明的民間檢查它,讓我知道我做錯了什麼?

該頁面應該有三個嵌入式JWPlayer與一些隨機視頻。它使用的CSS文件應該是桌面屏幕的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

請在這裏發佈一些相關的HTML和JS代碼。否則,一旦問題解決,這個問題將會給未來的讀者帶來所有的價值。謝謝! –

+0

感謝您修復Pekka上方的CSS代碼。 – Rick

回答

0

你可以嘗試把你的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> 
+0

我會這樣做,但該頁面會有3名玩家,所以我寧願將回調留在頭部和玩家體內。我希望這是有道理的。不管怎麼說,還是要謝謝你。 – Rick

+0

你可以做到這一點;然而,將它封裝在文檔準備好的回調中仍然是明智的。只要創建一個新的,你可以在頁面上儘可能多地在頭部或身體上進行搜索。 (雖然您仍然應該這樣做,但我認爲它不能解決您的問題;手工操作時我無法使用它,我會檢查SWF的有效性,並在此處查看文檔:http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference) –

+0

奇怪的是,它幾個小時前都在工作,然後我撥弄着代碼,彈簧飛起來。我會檢查瑞士法郎。再次感謝。 – Rick

0

你複製並粘貼第二和來自第一位的第三位選手?如果是這樣,它可能只會在頁面上粘貼一個玩家,直到您更改名稱爲止video_1,video_2,video_3。