Twitter 视频嵌入自动播放

Question

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

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

目前它看起来像这样:


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

Answer 1

注意:由于浏览器的新 CORS 策略，下面的解决方案不再适用。
将图像单击到 iframe 后，Twitter 小部件脚本似乎会注入(inject)播放器。 ，但要点击的链接是...嵌入在 iframe 中.所以当你在屏幕上看到“播放器”点击时，其实不是播放器，而只是一个激活播放器注入(inject)的链接。
因此，您的目标是通过以下步骤激活此注入(inject):

为小部件工厂设置目标监听器

获取小部件元素，一旦它被添加到 DOM(但在它被小部件工厂更改之后)

获取触发播放器嵌入的 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 .这是放置带有视频注入(inject)链接的 iframe 的地方。
创建嵌入链接
首先等待 twttr做好准备。在 scripting events 中阅读更多内容.
然后使用 factory function创建您的视频。
加载后，您可以使用 jQuery 查找 iframe内容的链接，触发注入(inject)。
代码:

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，可能不适用于所有情况下的所有浏览器。
如果您想根据需要扩展 fiddle ，请创建一个 fork。
编辑:只是为了您的兴趣，我在此代码中发现了一个带有 cookie 同意的隐藏链接，该链接基本上分解为“如果您单击此链接，则表示您同意我们的政策”，这很奇怪，因为没有人看不到此消息，因为它是隐藏的。
谢谢:
https://stackoverflow.com/a/2893315/3098783
https://stackoverflow.com/a/303961/3098783