I am having problems loading two videos (on the same page) when using Azure Media Player

I am having problems loading two videos on the same page when using JavaScript instead of the data-setup attribute. Here is an example which is based on the sample in the documentation located here: https://amp.azure.net/libs/amp/latest/samples/dynamic_setsource.html.

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

All I have done to the sample is to remove the comments and add a second video.

I have been unable to get the second video to load. I'm sure the player must support multiple videos on a page but cannot figure out what I am doing wrong?

Solution

You have set the same id and same source. Change the id and source it will be fine.

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

Change from

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

To,

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

In this sample you are using IIS media services, which renders media stream through manifest file. Since you are using same manifest file for both videos, this will render the same video.

Thanks.