비디오에서 하늘빛 비디오 플러그인 공유하기

하늘빛 플러그인을 사용하여 사이트에서 비디오를 재생하고 있습니다. 공유 기능을 사용하여 소셜 사이트에 동영상을 공유하고 싶습니다.비디오에서 하늘빛 비디오 플러그인 공유하기

내 응용 프로그램에 푸른 플러그인을 통합하기위한 코드 아래 수행했다.

<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 Media Service 팀에서 자산을 소셜 자산으로 공유하기 위해 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

비디오에서 하늘빛 비디오 플러그인 공유하기

답변

관련 문제