Twitter 视频嵌入自动播放

Question

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

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

目前它看起来像这样：

我可以做 Youtube，所以相信这也应该是可能的？

Answer 1

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

Twitter 小部件脚本似乎在单击图像后将播放器注入iframe，但单击的链接...嵌入在iframe 中。所以当你在屏幕上看到要点击的“播放器”时，其实并不是播放器，而只是一个激活播放器注入的链接。

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

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/

总结

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

该解决方案只是一种 hack，可能并非在所有情况下都适用于所有浏览器。

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

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

感谢：

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

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