7

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

我在自动播放 youtube 视频时遇到了同样的问题，显然，要让自动播放正常工作，你需要做一些 javascript 魔术，监听播放器的“onReady”事件，而不是在播放器加载并准备好播放时调用“ player.play()' 在没有任何其他用户干预的情况下启动它。

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

他们调用了 JS 迷你库Froogaloop以使事情变得更容易，我看到了 @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”行，但它接缝该ready()方法永远不会被调用，因为“就绪”事件从未触发（？） ...

有任何想法吗？

4

2 回答 2

8

我对这个问题的第一个答案是一种不太理想的蛮力方法。我建议使用 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>

此源代码也可用作要点

理智的人可能会说这不是最好的方法，但为了在您的 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];
}
于 2013-04-09T09:36:39.260 回答
2

由于Web 浏览器强制执行同源策略，无法在本地或通过 HTML 字符串加载文件。

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

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

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

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

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

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

有问题的代码很简单：（请参阅此要点以获取完整源代码）

<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，直到您认为它已准备好，然后告诉播放器对象播放。

于 2013-04-10T08:49:04.560 回答