azure视频插件在视频上分享

问题描述：

我正在使用azure插件在网站上播放视频。我想通过分享功能在社交网站上分享视频。azure视频插件在视频上分享

我在下面的代码做了蔚蓝的插件集成到我的应用程序。

<html> 
     <head> 
      <link href="//amp.azure.net/libs/amp/1.7.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> 
      <script src="~/Scripts/jquery-2.1.4.js"></script> 
      <script src="//amp.azure.net/libs/amp/1.7.3/azuremediaplayer.min.js"></script> 

     </head> 
     <body> 
      <div style="padding-top:10px"><video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0"></video> </div> 
     </body> 

     </html> 

    <script>  
     $(document).ready(function() {  
       var myOptions = { 
        "nativeControlsForTouch": false, 
        controls: true, 
        autoplay: true, 
        width: "640", 
        height: "400", 
       } 
       myPlayer = amp("azuremediaplayer", myOptions); 
       myPlayer.src([ 
         { 
          "src": "//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", 
          "type": "application/vnd.ms-sstr+xml" 
         } 
       ]); 
      }); 
    </script>

我想在视频的右上角没有默认控件的共享功能（共享图标）。

请帮我一把。

答

由于Azure媒体服务团队已经提供了一个JavaScript plun来将资产分享给社交。

您可以添加一个JavaScript脚本的lib在你的网页CSS文件，

<link href="amp-share.css" rel="stylesheet"> 
<script src="amp-share.js"></script>

，并在脚本中添加媒体播放器的服务器实例的事件侦听器。

myPlayer = amp("azuremediaplayer", myOptions,function(){ 
        this.addEventListener(amp.eventName.loadedmetadata, function() { 
         var shareOption = new Amp.Plugin.Share.ShareOptions; 
         shareOption.socialShare.shareIcons.push(Amp.Plugin.Share.SocialShareIcon.getPredefinedShareIcon(0 /* Facebook */)); 
         shareOption.socialShare.shareIcons.push(Amp.Plugin.Share.SocialShareIcon.getPredefinedShareIcon(1 /* Twitter */)); 
         shareOption.socialShare.shareIcons.push(Amp.Plugin.Share.SocialShareIcon.getPredefinedShareIcon(2 /* LinkedIn */)); 
         shareOption.socialShare.shareIcons.push(Amp.Plugin.Share.SocialShareIcon.getPredefinedShareIcon(3 /* Mail */)); 
         this.share(shareOption);/* plugin initialization*/ 
        }); 
       });

请参阅https://github.com/Azure-Samples/media-services-javascript-azure-media-player-social-share-plugin整个项目。

这段代码显示共享按钮的默认控件。我想要在视频的右上角分享按钮。我试过这个代码，但输出不是我想要的。 –

答

你现在正在看的插件，正如你已经注意到的，在控制栏中添加了一个分享按钮。如果这不是您正在查找的输出，您可以分发插件并删除在控制栏中创建按钮的代码。

如果你想在右上角添加一个按钮，你必须覆盖一个html元素，并将其内部的html设置为你想要的图标。（视频JS也有类似的插件，它确实在这里：https://github.com/jmccraw/videojs-socialShare/）

然后，给它一个事件侦听器上点击启动一个已经写在GitHub上的共享菜单覆盖。

如果您对此有更多的问题，随时以电子邮件[email protected]

azure视频插件在视频上分享

相关推荐