Twitter视频嵌入自动播放

Question

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

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

目前它看起来像这样：

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

Answer 1

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

Twitter小部件脚本似乎在将图像单击到iframe后注入了播放器，但点击的链接是......嵌入在iframe中。所以当你在屏幕上看到＆＃34;播放器＆＃34;点击，它实际上不是播放器，只是激活注入播放器的链接。

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

1. 为小部件工厂

设置目标侦听器

2. 获取小部件元素，一旦它被添加到DOM（但在小部件工厂改变之后）

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

为网站设置Twitter

根据following documentation：

准备页面

<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准备就绪。请阅读scripting events中的更多内容。

然后使用factory function制作视频。

加载后，您可以使用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/

摘要

Twitters视频嵌入缺乏正确的自动播放方式。然而，它是恕我直言，它应该是用户的决定，是否可以播放视频。

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

如果您想根据需要扩展小提琴，请创建一个分叉。

修改：为了您的兴趣，我在此代码中找到了一个隐藏的Cookie同意链接，基本上分解为＆＃34;如果您点击此链接，则表示您同意我们的政策＆＃34;这很奇怪，因为没有人能看到这条消息，因为它被隐藏了。

感谢：

https://stackoverflow.com/a/2893315/3098783

https://stackoverflow.com/a/303961/3098783