文章/答案/技术大牛

发布

社区首页 >问答首页 >azure视频插件在视频上共享

问azure视频插件在视频上共享
EN

Stack Overflow用户

提问于 2016-08-16 20:37:16

回答 2查看 244关注 0票数 1

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

Azure video player with sharing icons

我已经完成了以下代码，将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

回答 2

Stack Overflow用户

发布于 2016-08-17 11:13:37

因为Azure媒体服务团队已经提供了一个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

Stack Overflow用户

发布于 2016-09-15 01:39:54

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

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

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38975142

复制

相似问题

问azure视频插件在视频上共享
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问azure视频插件在视频上共享EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问azure视频插件在视频上共享
EN