如何从 azure 媒体播放器中删除加载图标答案

【问题标题】：How to remove loading icon from azure media player如何从 azure 媒体播放器中删除加载图标
【发布时间】：2016-01-27 03:05:59
【问题描述】：

我正在开发一个需要集成“Azure 媒体播放器”的网站，并且我有一个功能可以在用户已经暂停的地方呈现视频。

我的问题是，在继续播放视频时，播放器中会出现一个加载图标，并且当用户开始播放视频时该图标不会消失。

我附上了用于渲染播放器的 html 和 js 代码。由于某些安全原因，我只附上了演示代码。

<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>
<script>
    amp.options.flashSS.swf = "//amp.azure.net/libs/amp/latest/techs/StrobeMediaPlayback.2.0.swf"
    amp.options.flashSS.plugin = "//amp.azure.net/libs/amp/latest/techs/MSAdaptiveStreamingPlugin-osmf2.0.swf"
    amp.options.silverlightSS.xap = "//amp.azure.net/libs/amp/latest/techs/SmoothStreamingPlayer.xap"
</script>

<script type="text/javascript">
    $(document).ready(function () {
        displayVideo();
    });

    function displayVideo() {
        var myOptions = {
            techOrder: ["Flash","azureHtml5JS", "flashSS", "silverlightSS", "html5"],
            nativeControlsForTouch: false,
            autoplay: false,
            controls: true,
            width: "100%",
            height: "100%",
            poster: "",
            logo: { "enabled": false },
            hotKeys: { "enableFullscreen": true, "enableNumbers": true, "enableJogStyle": true, "enableMute": true, "seekStep": 3, "volumeStep": 5 },
        };
        var myPlayer = amp("moduleVideoPlayer", myOptions, function () {
        });

        myPlayer.addEventListener('ready', function () {
            console.log('ready!');
        });


        myPlayer.addEventListener("durationchange", function () {
            var duration = myPlayer.duration();
            if (duration > 0) {
                myPlayer.currentTime(8);
            }
        });


        myPlayer.addEventListener('ended', function () {
            console.log('Finished!');
        });

        myPlayer.addEventListener('pause', function () {
            //alert(this.currentTime());
            console.log('paused!');
        });

        myPlayer.src([
          {
              src: "//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest",
              type: "application/vnd.ms-sstr+xml",
              streamingFormats: ['SMOOTH']
              //streamingFormats: ["SMOOTH", "DASH", "HLS-V3", "HLS-V4"]
          },
        ]);
    }
</script>

<div style="width:500px;height:300px;margin-top:50px;">
    <video id="moduleVideoPlayer" class="azuremediaplayer amp-default-skin amp-big-play-centered"> </video>
</div>

注意： 我正在以 "H264 Smooth Streaming 720p" 格式对资产进行编码。

请给出这个问题的解决方案。谢谢。

【问题讨论】：

另外，对你的 techOrder 有点好奇 -> 推荐的 techOrder 是（默认的）techOrder: ["azureHtml5JS", "flashSS", "silverlightSS", "html5"] 你应该删除 "闪光”。这是为了在最流行的浏览器和设备上实现最佳播放。而在设置源时，为什么要强制平滑？推荐的流格式（默认）是 ["DASH", "SMOOTH", "HLS-V4", "HLS-V3"]。这是为了在最流行的浏览器和设备上实现最佳播放。你这样做是有原因的吗？

标签： azure azure-media-services

【解决方案1】：

微调器通过 css 显示，因此您可以根据 <div tabindex="-1" class="vjs-loading-spinner"></div> 类隐藏微调器元素

【讨论】：