Azure Media Player 完整设置

项目
04/05/2021

Azure Media Player 易于设置。只需片刻时间，即可直接从 Azure 媒体服务帐户获取媒体内容的基本播放。示例也会在发布的示例目录中提供。

步骤 1：在页面头包含 JavaScript 和 CSS 文件

使用 Azure Media Player，可以从 CDN 托管的版本访问脚本。现在通常建议在结束正文标记之前放置 JavaScript <body> 而不是 <head>，但 Azure Media Player 包含一个“HTML5 Shiv”，它需要位于较旧的 IE 版本的头中，以尊重视频标记作为有效元素。

注意

如果已在使用 HTML5 shiv（如 Modernizr），则可以在任意位置包含 Azure Media Player JavaScript。但是，请确保你的 Modernizr 版本包含用于视频的 shiv。

CDN 版本

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

重要

应不要在生产环境中使用 latest 版本，因为这种情况可能会按需更改。将 latest 替换为 Azure Media Player 的版本。例如，将 latest 替换为 2.1.1。可以从此处查询 Azure Media Player 版本。

注意

由于 1.2.0 版本，不再需要将位置包含在回退技术（它将自动从 azuremediaplayer.min.js 文件的相对路径中选取位置）。可以通过在上述脚本之后在 <head> 中添加以下脚本来修改回退技术的位置。

注意

由于 Flash 和 Silverlight 插件的性质，因此应将 xp 和 xap 文件托管在不包含任何敏感信息或数据的域中 - 这会自动为你处理 Azure CDN 托管的版本。

    <script>
      amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
      amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
    </script>

步骤 2：向页面添加 HTML5 视频标记

借助 Azure Media Player，可以使用 HTML5 视频标记嵌入视频。然后，Azure Media Player 将读取该标记并使其在所有浏览器中正常工作，而不仅仅是支持 HTML5 视频的浏览器。除了基本标记之外，Azure Media Player 还需要一些额外的部分。

<video> 上的 <data-setup> 属性指示 Azure Media Player 在页面准备就绪时自动设置视频，并从该属性读取任何（JSON 格式）。
id 属性：应对同一页上的每个视频使用和唯一。
class 属性包含两个类：
- azuremediaplayer 应用 Azure Media Player UI 功能所需的样式
- amp-default-skin 将默认外观应用于 HTML5 控件
<source> 包括两个必需属性
- src 属性可以包括 *.ism/manifest 文件从 Azure 媒体服务添加，Azure 媒体播放器会自动将 DASH、SMOOTH 和 HLS 的 URL 添加到播放器
- type 属性是流的必需 MIME 类型。与 “.ism/manifest”关联的 MIME 类型“application/vnd.ms-sstr+xml”
<source> 上的可选<data-setup> 属性告知 Azure Media Player，Azure 媒体服务中是否有任何唯一的传送策略，包括但不限于加密类型（AES 或 PlayReady、Widevine 或 FairPlay）和令牌。

与 HTML5 视频完全相同地包括/排除属性、设置、源和跟踪。

    <video id="vid1" class="azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'>
        <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />
        <p class="amp-no-js">
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video
        </p>
    </video>

默认情况下，大播放按钮位于左上角，因此它不会掩盖海报的有趣部分。如果想要将大型播放按钮居中，可以向 <video> 元素添加其他 amp-big-play-centeredclass。

动态加载 HTML 的替代设置

如果网页或应用程序动态加载视频标记（ajax、appendChild 等），以便在页面加载时可能不存在视频标记，则需要手动设置播放器，而不是依赖数据设置属性。为此，请先从标记中删除数据设置属性，以便在初始化播放器时不会混淆。接下来，在 Azure Media Player JavaScript 加载之后，并在视频标记加载到 DOM 后一段时间运行以下 JavaScript。

    var myPlayer = amp('vid1', { /* Options */
            techOrder: ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"],
            "nativeControlsForTouch": false,
            autoplay: false,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        }, function() {
              console.log('Good to go!');
               // add an event listener
              this.addEventListener('ended', function() {
                console.log('Finished!');
            });
          }
    );
    myPlayer.src([{
        src: "http://samplescdn.origin.mediaservices.windows.net/e0e820ec-f6a2-4ea2-afe3-1eed4e06ab2c/AzureMediaServices_Overview.ism/manifest",
        type: "application/vnd.ms-sstr+xml"
    }]);

amp 函数中的第一个参数是视频标记的 ID。将其替换为你自己的。

第二个参数是 options 对象。它允许你设置其他选项，就像使用数据设置属性一样。

第三个参数是一个“就绪”回调。 Azure Media Player 初始化后，它将调用此函数。在就绪回调中，“this”对象引用播放器实例。

还可以传递对元素本身的引用，而不是使用元素 ID。


    amp(document.getElementById('example_video_1'), {/*Options*/}, function() {
        //This is functionally the same as the previous example.
    });
    myPlayer.src([{ src: "//example/path/to/myVideo.ism/manifest", type: "application/vnd.ms-sstr+xml"]);

通过

Azure Media Player 完整设置

步骤 1：在页面头包含 JavaScript 和 CSS 文件

CDN 版本

步骤 2：向页面添加 HTML5 视频标记

动态加载 HTML 的替代设置

其他资源