Objective c - 如何使用 JS 自动播放 Vimeo 视频答案

【问题标题】：Objective c - How to autoplay Vimeo videos using JSObjective c - 如何使用 JS 自动播放 Vimeo 视频
【发布时间】：2013-03-22 09:16:39
【问题描述】：

每个尝试让 Youtube/Vimeo 视频在 iOS 上自动开始播放的人都知道这可能是一项痛苦的任务。 Apple 出于正确的原因阻止了“自动播放”参数，但有时您仍需要让此功能正常工作。

我对@987654321@ 有同样的问题，显然，要让自动播放工作，你需要做一些 JavaScript 魔术，监听播放器的 'onReady' 事件，而不是当播放器加载并准备好播放你调用“player.play()”启动它，无需任何其他用户干预。

Vimeo 也有一些 javascript API，我很确定你可以用它做自动播放技巧，我只是想不出如何使用它。

他们有一个名为Froogaloop 的 JS 迷你库来简化操作，我看到 this answer by @ila 将它与以下 html 字符串结合使用：

NSString *htmlString = [NSString stringWithFormat:
                                                @"<html><head>"
                                                "<script src=\"froogaloop.js\"></script>"
                                                " <script>"
                                                    "function ready()"
                                                        "{$f(document.getElementById(\"player\")).api(\"play\");}"
                                                    "function func1() "
                                                        "{$f(document.getElementById(\"player\")).addEvent(\"ready\", ready);}"
                                                    "window.onload=func1;"
                                                "</script></head><body>"
                                                       "<iframe id=\"player\" src=\"http://player.vimeo.com/video/39287488?api=1&amp;player_id=player\" width=\"315\" height=\"455\" frameborder=\"0\" webkit-playsinline>"
                                               " </iframe></body></html>"];    

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"webview loaded");
    NSString *path = [[NSBundle mainBundle] pathForResource:@"froogaloop" ofType:@"js"];
    NSString *jsCode = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
    [webView stringByEvaluatingJavaScriptFromString:jsCode];
}

但这对我不起作用，在向此代码添加警报后，我可以看到 func1() 被调用并执行 'addEvent' 行，但是它接缝 @987654326 @ 方法永远不会被调用，因为 'ready' 事件从未触发 (?)...

有什么想法吗？

【问题讨论】：

标签： javascript iphone ios objective-c vimeo

【解决方案1】：

我对这个问题的第一个答案是一种不太理想的蛮力方法。我建议使用 Vimeo Javascript API 和 froogaloop 查看我的第二种方法。

我将假设您在 html 页面中使用 Vimeo iframe，并且您在 iOS 应用程序或 Safari 中的 UIWebView 中使用此页面。

对 Vimeo iframe 的一点内省表明它最初不会加载 html 视频标签。您必须以编程方式点击“播放”按钮才能加载视频。

为了在今天（2013 年 4 月，可能会发生变化）做到这一点，您只需获取正确的元素并调用正确的函数即可。最好用一些工作示例代码来演示。

// You are loading this page inside a UIWebView
<html>
<head></head>
<body>
    <iframe width="" height="" src="http://player.vimeo.com/video/62207569 " frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    <script>
    // Add a listener for the window's load event
    window.addEventListener('load', onWindowLoad, false);

    function onWindowLoad(event) {
        //use a loop to continue checking the vimeo iframe for the 'play' button
        checkForTrue(isIframeButtonLoaded, iFrameButtonLoaded);
    }

    function checkForTrue(func, callback) {
        setTimeout(function() {
            if (func()) {
                callback( iFrameButton() );
            } else {
                checkForTrue(func, callback);
            };
        }, 1000);
    }

    //finds the 'play' button within the Vimeo iframe
    function iFrameButton() {
                    //window.frames[0].document.getElementsByTagName('div')[1]; // this also works...
        return window.frames[0].document.getElementsByTagName('button')[5];
    }

    //simple boolean condition to check for the iframe button
    function isIframeButtonLoaded() {
        return ( iFrameButton() != null );
    }

    //once the button is loaded, click it
    function iFrameButtonLoaded(iFrameButton) {
        iFrameButton.click();
    }

    </script>
</body>
</html>

This source code is also available as a gist

理智的人可能会说这不是最好的方法，但为了在您的 iOS 应用程序中自动播放 vimeo 视频，它似乎确实有效。

从包中加载 html 文件并将其加载到 UIWebView 中的代码是样板文件：

- (void)viewDidLoad
{
    [super viewDidLoad];
    NSString *htmlFile = [[NSBundle mainBundle] pathForResource:@"VimeoTrial" ofType:@"html"];
    NSString *htmlString = [NSString stringWithContentsOfFile:htmlFile encoding:NSUTF8StringEncoding error:nil];

    [self.webView loadHTMLString:htmlString baseURL:nil];
}

【讨论】：

嗨，感谢您的回复 :) 它似乎有效，但我对这个解决方案有两个问题： 1. 正如你所提到的，这不是最好的方法，我更喜欢处理的答案这个问题使用官方的 Vimeo JS API。按钮布局之类的东西会随着时间而改变并破坏我的代码。 2.当我点击播放时，播放按钮会显示几秒钟，然后旋转器才会启动。我尝试更改 'setTimeout' 中的 1000 值，但没有帮助。我希望微调器在我点击播放按钮的那一刻开始（或者至少在点击播放按钮后播放按钮不可见）
根据 JS API，有一个“播放”方法可以发送给播放器（参见 API 参考）。有机会我会更新我的答案。 developer.vimeo.com/player/js-api
您的代码在我的情况下不起作用。你能帮我一点吗？ @Jessedc

【解决方案2】：

由于网络浏览器强制使用Same Origin Policy，因此无法在本地或通过 HTML 字符串加载文件。

iframe 无法将其postEvent() 调用传播回主窗口，因为 Vimeo iframe 正在通过 http:// 协议访问，而本地文件是通过 file:// 协议进行的。 'ready' 事件是通过这种机制发送的。

在这种情况下可以使用 Vimeo API，但为了自动播放视频，您需要知道 iframe 何时加载，但“ready”事件是通过 postEvent 从 iframe 发送到窗口的。

Vimeo API Documentation 中提供的代码清楚地表明了它使用 postEvent 的事实。 Froogaloop 也使用相同的代码

window.addEventListener('message', onMessageReceived, false);

如果您在机器上的 HTML 文件中运行 Vimeo API 的最基本示例，Google Chrome 将抛出描述性消息：（Safari 不显示此消息）

不安全的 JavaScript 尝试从 URL http://player.vimeo.com... 的框架访问具有 URL 的框架 file:///...index.html 请求访问的框架具有“http”协议，被访问的框架具有“协议”文件'。协议必须匹配。

有问题的代码很简单：(See this gist for the full source)

<iframe id="player" width="" height="" src="http://player.vimeo.com/video/62207569?api=1&player_id=player" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

<script>    
  var player = $f(document.getElementById('player'));
  player.addEvent('ready', function() { 
  player.api('play');
});
</script>

正确的解决方案是将 HTML 页面托管在与 Vimeo iframe 具有相同协议的远程服务上。在这种情况下，来自http:// 地址的任何内容。

如果您从 http://(insert your host here) 加载上述内容，它会立即在 iOS 模拟器、Safari 和 Google chrome 中运行。

如果您想在设备上做更多事情，则必须合并我给出的两个答案；轮询 iframe，直到您认为它已准备好，然后告诉播放器对象开始播放。

【讨论】：

你看到我解决 youtube 视频同样问题的方法了吗？ stackoverflow.com/questions/15717754 我不能在 vimeo 上使用同样的方法吗？
您所指的答案并未暗示您将如何让 Vimeo 视频以相同的方式工作。通过查看这两个 API，很明显它们的操作方式完全不同。 YouTube iframe API 在页面上创建 iframe 元素，而 Vimeo API 嵌入在 iframe 本身中。毫无疑问，Youtube 将一些事件与 javascript 直接绑定到 iframe（类似于我第一个答案中的深度潜水），而 Vimeo 只使用标准的 postEvent() 方法。