Twitter视频嵌入自动播放

时间:2018-02-26 12:51:20

标签: twitter

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

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

目前它看起来像这样: enter image description here

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

1 个答案:

答案 0 :(得分:4)

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

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

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

  1. 为小部件工厂

  2. 设置目标侦听器
  3. 获取小部件元素,一旦它被添加到DOM(但在小部件工厂改变之后)

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

  5. 为网站设置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