2013-09-26 43 views
1

我正嘗試在一個網站上使用幾個JW玩家。我需要放置其中的48個,但它只有一個可見。我認爲它與「容器」參數有關。我可以在一個頁面上使用幾個JW玩家嗎?

<script type="text/javascript" src="http://video.captive-portal.com/jwplayer.js"></script> 
<script type="text/javascript"> 
    jwplayer("container").setup({ 
     flashplayer: "http://video.captive-portal.com/player.swf", 
     file: "http://content.captive-portal.com/campaigns/sky/videos/1/1.mp4", 
     image: "http://content.captive-portal.com/campaigns/sky/videos/1/1.jpg", 
     width: 480, 
     height: 270 
    }); 


<script type="text/javascript" src="http://video.captive-portal.com/jwplayer.js"></script> 
<script type="text/javascript"> 
    jwplayer("container").setup({ 
     flashplayer: "http://video.captive-portal.com/player.swf", 
     file: "http://content.captive-portal.com/campaigns/sky/videos/1/2.mp4", 
     image: "http://content.captive-portal.com/campaigns/sky/videos/1/2.jpg", 
     width: 480, 
     height: 270 
    }); 
</script> 

如果我改變了「容器」,以其他任何在它顯示只是第二個第一個的情況下,所以我假設容器包含內容(顯然)。我如何修改此功能以便能夠在一個頁面上播放多個視頻?我相信有人也會遇到這個問題。 非常感謝。

回答

1

爲什麼不能對外部的容器內,然後創建一個保存你只需要修改CSS一點點地適應球員,但除此之外,它應該工作是這樣的球員的另一個DIV:

<Wrapper> 
<maincontent> 
<player1> 
    `<script type="text/javascript" src="http://video.captive-portal.com/jwplayer.js"></script> 
    <script type="text/javascript"> 
    jwplayer("container").setup({ 
    flashplayer: "http://video.captive-portal.com/player.swf", 
    file: "http://content.captive-portal.com/campaigns/sky/videos/1/1.mp4", 
    image: "http://content.captive-portal.com/campaigns/sky/videos/1/1.jpg", 
    width: 480, 
    height: 270 
}); 
</div> 

<player2> 
    `<script type="text/javascript" src="http://video.captive-portal.com/jwplayer.js"></script> 
    <script type="text/javascript"> 
    jwplayer("container").setup({ 
    flashplayer: "http://video.captive-portal.com/player.swf", 
    file: "http://content.captive-portal.com/campaigns/sky/videos/1/1.mp4", 
    image: "http://content.captive-portal.com/campaigns/sky/videos/1/1.jpg", 
    width: 480, 
    height: 270 
}); 
</div> 
</div> this is the end of the main content 
</div> this is the end of the Wrapper i changed container to wrapper so there are no conflicts 

這不是做聰明最好的辦法是做一個視頻庫,以便例如得到48張圖片使用它們可以鏈接到的網頁,你要與視頻相關聯,然後當你點擊圖片,你將有視頻播放器啓動

+0

對不起,我不知道你在這裏是什麼意思。是否可以包含我放在我的問題中的代碼?這是來自原始jwplayer的代碼。我認爲除了鏈接到引擎+視頻+圖像之外,我無法修改它。該容器是「內部」的實際腳本...代碼將嵌入播放器是非常有益的。謝謝 –

+0

取決於你將如何設置?如果你看看我的最後一個例子,我會編輯它,把你的代碼放入 – Pazrat

+0

,不幸的是它不能工作。 jwplayer從我所能看到的容器(id)是必需的,然後在播放器中需要「容器」作爲標籤來顯示視頻。不幸的是它不起作用。 –

1

您需要在您的網頁上48個不同的DIV標籤,每個代碼將指DIF不同的div標籤(帶有ID或其他)。 此外,您只需在一個腳本標記中獲取jwplayer js文件一次,其餘所有代碼也可以分成一個腳本標記。

這將基本上給你48個的球員在一個頁面,這是不是一個很好的主意。實際上你需要做的只是在頁面中加載48個圖像,並且只有當圖像被點擊時才使用javascript來加載播放器和相應的視頻。

+0

這就是它的工作原理。它顯示圖像,點擊後開始播放視頻。它在加載頁面後不會立即加載它。 –

+0

@PiotrCiszewski多數民衆贊成在很好。我希望玩家加載代碼在顯示圖像後不會做太重的事情,比如繪製控件和附加太多事件處理程序。對於這一切,48是一個很大的數字。 – Munim

1

你想這換做是不加載它們在一個頁面上,因爲它會使用所有的數據最好的辦法可能是我對視頻庫的想法,因爲這樣你可以爲手機更好地設計它的移動或平板電腦最好的東西加它不太可能了

+0

這將全部通過WiFi。總體思路是將它們全部放在一個頁面上,因爲它以這種方式工作 - 從下拉列表中選擇您喜歡的電影,併爲您提供可能感興趣的類似預告片的示例......這就是爲什麼他們需要全部在一個頁面上。他們不玩,甚至沒有加載,直到點擊,所以這不是我想的問題。 –

0

只需使用不同的ID玩家的每個實例運行緩慢或吃的數據。

快速演示代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script> 
     <title>Multiple</title> 
    </head> 
    <body> 
      <div id="container"></div> 
      <script type="text/javascript"> 
      jwplayer("container").setup({ 
      file: "http://www.longtailvideo.com/jw/upload/bunny.mp4", 
      image: "http://www.longtailvideo.com/jw/upload/bunny.jpg", 
      height: 300, 
      width: 400, 
      controlbar: "bottom" 
      }); 
      </script> 
      <div id="container2"></div> 
      <script type="text/javascript"> 
      jwplayer("container2").setup({ 
      file: "http://www.longtailvideo.com/jw/upload/bunny.flv", 
      image: "http://www.longtailvideo.com/jw/upload/bunny.jpg", 
      height: 300, 
      width: 400, 
      controlbar: "bottom" 
      }); 
      </script> 
      <div id="container3"></div> 
      <script type="text/javascript"> 
      jwplayer("container3").setup({ 
      file: "http://www.longtailvideo.com/jw/upload/bunny.mov", 
      image: "http://www.longtailvideo.com/jw/upload/bunny.jpg", 
      height: 300, 
      width: 400, 
      controlbar: "bottom" 
      }); 
      </script>   
</html> 

希望這有助於!

+0

謝謝。它適合你嗎?我在那裏看不到任何視頻。我檢查了3個瀏覽器。 –

+0

Np。你在哪裏運行?您應該可以在任何應用程序的任何位置複製和粘貼此代碼。 – emaxsaun

相關問題