2016-01-22 28 views
0

我正在開發一個網站,我需要集成「Azure媒體播放器」,並且我有一個功能可以從用戶已經暫停的位置呈現視頻。如何從天青媒體播放器中刪除加載圖標

我的問題是,在恢復視頻的同時,播放器中會出現一個加載圖標,當用戶開始播放視頻時,該圖標不會消失。

我附上我的html和js代碼來渲染player.Due由於一些安全原因,我只附加演示代碼。

<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平滑流720P」格式的資產。

請給這個問題的解決方案。 謝謝。

+1

此外微調元素,那種好奇,你techOrder - >推薦techOrder是(和默認的)techOrder:「azureHtml5JS 「,」flashSS「,」silverlightSS「,」html5「]你應該刪除」Flash「。這是爲了在最流行的瀏覽器和設備上實現最佳播放效果。 而當設置來源時,爲什麼強制平滑?推薦的streamingFormat(和默認值)是[「DASH」,「SMOOTH」,「HLS-V4」,「HLS-V3」]。這是爲了在最流行的瀏覽器和設備上實現最佳播放效果。 你有這樣的理由嗎? –

回答

1

微調是通過CSS顯示,所以你可以只隱藏基於類<div tabindex="-1" class="vjs-loading-spinner"></div>