Question

在使用JavaScript而不是数据设置属性时，我在同一页面上加载两个视频时遇到问题。以下示例基于此处文档中的示例：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>

我对示例所做的只是删除评论并添加第二个视频。

我无法加载第二个视频。我确定播放器必须支持页面上的多个视频，但无法弄清楚我做错了什么？

Answer 1

您已设置相同的ID和相同的来源。更改ID和来源就可以了。

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

从

改变

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

要，

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

在此示例中，您使用的是IIS媒体服务，它通过清单文件呈现媒体流。由于您对两个视频使用相同的清单文件，因此这将呈现相同的视频。

感谢。

使用Azure Media Player时，我在加载两个视频（在同一页面上）时遇到问题

1 个答案: