Twitter视频嵌入自动播放

Question

我已经查看了堆栈上的某些资源而不是流量,但有些资源没有答案,也没有处于非活动状态.

当有些人到达我的网站时,我会想要自动播放推特视频.

目前它看起来像这样:

我能够做Youtube,所以相信这也应该可行吗？

Answer 1

注意：由于浏览器的新 CORS 策略，下面的解决方案不再开箱即用。

Twitter 小部件脚本似乎在单击图像后将播放器注入到 中iframe，但要单击的链接...嵌入到 中iframe。因此，当您在屏幕上看到要单击的“播放器”时，它实际上不是播放器，而只是激活播放器注入的链接。

因此，您的目标是通过以下步骤激活此注入：

1. 为小部件工厂设置目标侦听器

2. 获取 widget 元素，一旦它被添加到 DOM（但是在它被 widget 工厂更改之后）

3. 获取触发播放器嵌入的 iframe 文档链接

为网站设置 Twitter

根据以下文档准备您的页面：

<div id="videoTarget"></div>

<!--<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>-->
<script>
    window.twttr = (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
            t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function(f) {
            t._e.push(f);
        };

        return t;
    }(document, "script", "twitter-wjs"));

</script>

我们工厂的目标是videoTarget. 这是放置带有视频注入链接的 iframe 的位置。

创建嵌入链接

首先等待twttr准备就绪。在脚本事件中阅读更多内容。

然后使用工厂函数来创建您的视频。

加载后，您可以使用 jQuery 查找iframe内容的链接，从而触发注入。

代码：

window.twttr.ready(function(_twttr) {
    _twttr.widgets.createVideo(
            '560070183650213889',
            $('#videoTarget').get(0), {
                lang: "en",
            }
        )
        .then(function(el) {
            const dataId = $(el).attr('data-tweet-id');
            const doc = $('iframe').get(0).contentWindow.document;
            const link = $(doc).find("a[href*=" + dataId + "]")[0];
            link.click();
        });
});

工作解决方案： https: //jsfiddle.net/5qmh1Lpn/121/

概括

Twitter 的视频嵌入缺乏自动播放的正确方法。然而，恕我直言，这是一个反功能，是否播放视频应该由用户决定。

该解决方案只是一种破解，可能不适用于所有情况下的所有浏览器。

如果您想扩展小提琴以满足您的需要，请创建一个叉子。

编辑：只是为了您的兴趣，我在这段代码中发现了一个带有 cookie 同意的隐藏链接，它基本上可以分解为“如果您单击此链接，您就同意我们的政策”，这很奇怪，因为没有人能看到这条消息，因为它是隐。

谢谢：

/sf/answers/202532081/

/sf/answers/21277301/