2016-02-27 177 views
0

我在使用JavaScript代替數據設置屬性時在同一頁面上加載兩個視頻時出現問題。以下是一個基於示例文件的示例:https://amp.azure.net/libs/amp/latest/samples/dynamic_setsource.html我在使用Azure媒體播放器時加載兩個視頻(在同一頁上)時出現問題

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Azure Media Player</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="//amp.azure.net/libs/amp/latest/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> 
    <script src="//amp.azure.net/libs/amp/latest/azuremediaplayer.min.js"></script> 
</head> 
<body> 
    <h1>Sample: Clear</h1> 
    <h3>Video 1</h3> 
    <div style="width: 320px;height: 200px; margin: 20px"> 
     <video id="azuremediaplayer1" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video> 
    </div> 
    <h3>Video 2</h3> 
    <div style="width: 320px;height: 200px; margin: 20px"> 
     <video id="azuremediaplayer2" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"> </video> 
    </div> 
    <script> 
     var myOptions = { 
      "nativeControlsForTouch": false, 
      autoplay: true, 
      controls: true, 
      width: "320", 
      height: "200", 
      poster: "" 
     }; 
     var myPlayer1 = amp("azuremediaplayer1", myOptions); 
     myPlayer1.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]); 


     var myPlayer2 = amp("azuremediaplayer1", myOptions); 
     myPlayer2.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]); 
    </script> 
</body> 
</html> 

我對樣本做的所有事情是刪除評論並添加第二個視頻。

我一直無法得到第二個視頻加載。我確定玩家必須在頁面上支持多個視頻,但無法弄清楚我做錯了什麼?

+0

它似乎你正試圖呈現相同的視頻。那是對的嗎? –

+0

嗨Sathik,例如我,但它沒有區別,如果它是兩個不同的視頻。 – Ross

+0

請檢查我的答案。謝謝。 –

回答

2

您已設置相同的ID和相同的來源。改變ID和來源它會很好。從

var myPlayer2 = amp("azuremediaplayer1", myOptions); 

var myPlayer1 = amp("azuremediaplayer1", myOptions); 

變化,

var myPlayer2 = amp("azuremediaplayer2", myOptions); 

在此示例中使用的是IIS媒體服務,它通過清單文件呈現的媒體流。由於您對兩個視頻都使用相同的清單文件,因此這會呈現相同的視頻。

謝謝。

相關問題