azure 视频插件在视频上共享答案

【问题标题】：azure video plugin sharing on videoazure 视频插件在视频上共享
【发布时间】：2016-08-16 12:37:15
【问题描述】：

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

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

请帮帮我。

【问题讨论】：

标签： javascript jquery video media-player azure-media-services

【解决方案1】：

由于 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。

【讨论】：

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

【解决方案2】：

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

如果你想在右上角添加一个按钮，你必须覆盖一个 html 元素并将它的内部 html 设置为你想要的图标。（视频 JS 有一个类似的插件可以做到这一点：https://github.com/jmccraw/videojs-socialShare/）

然后，给它一个点击事件监听器并启动已经在 GitHub 中编写的共享菜单覆盖。

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

【讨论】：