1

Я использую плагин Azure для воспроизведения видео на сайте. Я хочу поделиться видео на социальных сайтах, используя функции совместного использования.azure video plugin sharing on video

Azure video player with sharing icons

я сделал ниже кода для интеграции лазурного плагин к моему заявлению.

<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> 

Я хочу использовать общие функции (обмениваться значками) в правом верхнем углу видео, которые не имеют элементов управления по умолчанию.

Пожалуйста, помогите мне.

ответ

1

Как команда Azure Media Service предоставила javascript plun, чтобы разделить актив на социальный.

Вы можете добавить яваскрипт 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.

+1

Этот код показывает, обмениваться кнопки, как элементы управления по умолчанию. И я хочу поделиться кнопками в правом верхнем углу видео. Я пробовал этот код, но вывод не так, как я хочу. –

1

плагин, на который вы смотрите прямо сейчас, как вы заметили, добавляет кнопку совместного доступа к панели управления. Если это не тот результат, который вы ищете, вы можете разблокировать плагин и удалить код, который создает кнопку на панели управления.

Если вы хотите добавить кнопку в верхнем правом углу, вам нужно будет наложить элемент html и установить его внутренний html в качестве значка, который вы хотите. (Video JS имеет подобный плагин, который делает это здесь: https://github.com/jmccraw/videojs-socialShare/)

Затем дать ему слушатель событий по щелчку и запуск меню накладки акций, что уже написано в GitHub.

, если у вас есть вопросы по этому поводу, не стесняйтесь, пишите [email protected]