Javascript azure视频插件在视频上共享_Javascript_Jquery_Video_Media Player_Azure Media Services

Javascript azure视频插件在视频上共享

javascript jquery video

Javascript azure视频插件在视频上共享,javascript,jquery,video,media-player,azure-media-services,Javascript,Jquery,Video,Media Player,Azure Media Services,我正在使用azure插件在网站上播放视频。我想使用共享功能在社交网站上共享视频我已经完成了以下将azure插件集成到我的应用程序的代码 <html> <head> <link href="//amp.azure.net/libs/amp/1.7.3/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> <script

我正在使用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>


$（文档）.ready（函数（）{
变量myOptions={
“nativeControlsForTouch”：错误，
控制：对，
自动播放：对，
宽度：“640”，
高度：“400”，
}
myPlayer=amp（“azuremediaplayer”，myOptions）；
myPlayer.src([
{
“src”：“//amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest”，
“类型”：“application/vnd.ms sstr+xml”
}
]);
});

我希望视频右上角的共享功能（共享图标）不在默认控件中

请帮助我。

因为Azure媒体服务团队提供了一个javascript PLON，用于将资产共享给社交网站

您可以在页面中添加javascript库脚本和css文件

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

请参阅以了解整个项目。

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

如果您想在右上角添加一个按钮，您必须覆盖一个html元素，并将其内部html设置为您想要的图标。（视频JS在这里有一个类似的插件：）

然后，在单击时为其提供一个事件侦听器，并启动已经在GitHub中编写的共享菜单覆盖

如果您对此有更多问题，请随时发送电子邮件ampinfo@microsoft.com

此代码将共享按钮显示为默认控件。我想要在视频右上角的共享按钮。我尝试了这段代码，但输出不是我想要的。

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*/
                    });
                });