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>

我想在視頻的右上角沒有默認控件的共享功能（共享圖標）。

請幫我一把。

來源

2016-08-16 Dharti Vasani

由於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整個項目。

來源

2016-08-17 03:13:37

這段代碼顯示共享按鈕的默認控件。我想要在視頻的右上角分享按鈕。我試過這個代碼，但輸出不是我想要的。 –

你現在正在看的插件，正如你已經注意到的，在控制欄中添加了一個分享按鈕。如果這不是您正在查找的輸出，您可以分發插件並刪除在控制欄中創建按鈕的代碼。

如果你想在右上角添加一個按鈕，你必須覆蓋一個html元素，並將其內部的html設置爲你想要的圖標。（視頻JS也有類似的插件，它確實在這裏：https://github.com/jmccraw/videojs-socialShare/）

然後，給它一個事件偵聽器上點擊啓動一個已經寫在GitHub上的共享菜單覆蓋。

如果您對此有更多的問題，隨時以電子郵件[email protected]

來源

2016-09-14 17:39:54 sraje

azure視頻插件在視頻上分享

回答

相關問題