2016-01-22 29 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>