SoundCloud 如何在 Facebook 上嵌入 HTML5/JS 小部件? [英] How is SoundCloud embedding an HTML5/JS widget on Facebook?

问题描述

这是我看到的场景 -

Here's the scenario I'm seeing -

• 您点击将声音从 SoundCloud 发布到 Facebook
• 它在帖子中嵌入了一个播放器，您可以单击该播放器将您带到 SoundCloud 上的原始项目，或者您可以单击播放图标直接在您的提要中播放声音.
• 播放器是一个 Javascript/HTML5 播放器(您可以通过查看源代码看到)但是，如果您将嵌入的 URL 放入 Facebook 开放图调试器中，您会看到它似乎指向嵌入 Flash主权财富基金

SoundCloud 是怎么做的，似乎是某种重定向技巧来让og:video"SWF 变成 JS/HTML5 播放器?

How is SoundCloud doing, what appears to be, some kind of redirect trick to get a "og:video" SWF to turn into a JS/HTML5 player?

我注意到soundcloud:sound"有一个og:type"那么它是某种白名单/Facebook应用场景吗?

I notice that there is an "og:type" of "soundcloud:sound" so is it some kind of whitelist/Facebook application scenario?

自己尝试一下:

• OG 调试: https://developers.facebook.com/tools/debug/og/object?q=https%3A%2F%2Fsoundcloud.com%2Fsystek_music%2Fcyberoptics-sub-antix-the%3Futm_source%3Dsoundcloud%26utm_campaign%3Dshare%26utm_medium%3Dfacebook

我确实从 SoundCloud 网站上找到了一些关于他们如何切换到 JS 播放器的信息(在旧浏览器上回退到 Flash):http://help.soundcloud.com/customer/portal/articles/1219149-where-has-the-flash-widget-gone-

I did find this bit of info from the SoundCloud site about how they've switched to JS players (that fall back to Flash on older browsers): http://help.soundcloud.com/customer/portal/articles/1219149-where-has-the-flash-widget-gone-

推荐答案

这可能只是部分答案.但是存在一个特殊的Facebook Open Graph Music 程序，该程序仅对列入白名单的合作伙伴可用这次".这包括一个 bridge，其目标是在Facebook.com 可以播放和暂停曲目并指示正在播放的曲目."

This may only be a partial answer. But there exists a special Facebook Open Graph Music program which "is only available to whitelisted partners at this time". This includes a bridge which has the goal to "enable play buttons on feed stories on Facebook.com that can play and pause tracks and indicate which is playing."

但是，显然你可以在 og:video:type 中包含 Flash (application/x-shockwave-flash) 和 HTML5 视频 (video/mp4) 格式财产.

However, apparently you can include both Flash (application/x-shockwave-flash) and HTML5 video (video/mp4) formats in the og:video:type property.

这篇关于SoundCloud 如何在 Facebook 上嵌入 HTML5/JS 小部件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！