Twitter 视频嵌入自动播放

Posted 2023-03-05

【中文标题】Twitter 视频嵌入自动播放

【英文标题】：Twitter Video Embed auto play

【发布时间】：2018-08-05 22:28:03

【问题描述】：

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

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

目前它看起来像这样：

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

【问题讨论】：

您的编程问题到底是什么？你试过什么？

@Lundin 我正在使用 twitter 提供的嵌入式代码。我不知道，如何让twitter提供的视频代码自动播放。

【参考方案1】：

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

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

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

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

在添加到 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。这是放置带有视频注入链接的 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://***.com/a/2893315/3098783

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

【讨论】：

尝试了您的解决方案，但我收到此错误：未捕获的 DOMException: Blocked a frame with origin "xxxxxx.repl.co" from access a cross-origin frame on the line $('iframe').get( 0).contentWindow.document。还能用吗？

是的，由于 CORS 政策，它不再起作用。我会更新我的答案。

很遗憾，很聪明:)