Azure视频插件分享视频

azure video plugin sharing on video

本文关键字：视频 分享 插件 Azure      更新时间：2023-09-26

我使用azure插件在网站上播放视频。我想使用分享功能在社交网站上分享视频。

带有共享图标的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>

我希望共享功能(共享图标)在视频的右上角，而不是在默认控件。

请帮帮我。

Azure Media Service团队已经提供了一个javascript计划来将资产分享给社交媒体。

你可以在你的页面中添加一个javascript库脚本和一个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

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

如果你想在右上角添加一个按钮，你必须覆盖一个html元素，并将它的内部html设置为你想要的图标。(Video JS有一个类似的插件，在这里:https://github.com/jmccraw/videojs-socialShare/)

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

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

相关文章：