1

私は紺碧のプラグインを使用してサイトの動画を再生しています。共有機能を使ってソーシャルサイトでビデオを共有したい紺碧のビデオプラグインをビデオで共有する

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を提供しています。

あなたは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を参照してください。

+1

このコードは、デフォルトのコントロールとしてのシェアボタンを示しています。ビデオの右上に共有ボタンが必要です私はこのコードを試しましたが、出力は私が望む通りではありません。 –

1

あなたが今見ているプラ​​グインは、あなたが気づいたように、コントロールバーに共有ボタンを追加します。これが探している出力でない場合は、プラグインをフォークし、コントロールバーのボタンを作成するコードを削除します。

右上隅にボタンを追加する場合は、html要素をオーバーレイし、内側のhtmlを希望のアイコンに設定する必要があります。 (Video JSにはこれと同様のプラグインがあります:https://github.com/jmccraw/videojs-socialShare/

次に、イベントリスナーをクリックして、GitHubに既に書き込まれている共有メニューオーバーレイを起動します。

あなたはこれについて多くの質問がある場合は、電子メールを送ること自由に感じ[email protected]

関連する問題