在 iOS 上使用 javascript api 嵌入 vimeo答案

【问题标题】：Embedding vimeo with javascript api on iOS在 iOS 上使用 javascript api 嵌入 vimeo
【发布时间】：2014-08-03 11:06:07
【问题描述】：

我正在尝试使用 vimeo 的 javascript api (http://developer.vimeo.com/player/js-api) 通过我的应用程序控制嵌入式视频，但我什至无法让他们的示例正常工作 (http://jsfiddle.net/bdougherty/HfwWY/light/)

我尝试下载 fiddle 使用的 jquery 和 frogaloop javascripts，并将它们复制到 xcode 中，我还确保将它们放在 Bundle Resources 而不是人们建议的 Compile Sources 上。

在我的ViewController 我有：

NSString *path = [[NSBundle mainBundle] pathForResource:@"vimeo" ofType:@"html"];
NSString *html = [[NSString alloc] initWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

[_webby loadHTMLString:html baseURL:[[NSBundle mainBundle] bundleURL]];

那我的vimeo.html 是这样的

<html>
<body>
<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<p>Video status: <span class="status">...</span></p>
<p><button>Play</button> <button>Pause</button></p>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="froogaloop2.min.js"></script>
<script type="text/javascript" src="player.js"></script>

</body>

其中jquery.min.js 是https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 和froogaloop2.min.js 是http://a.vimeocdn.com/js/froogaloop2.min.js

那么我的player.js 就像带有ondomready 功能的小提琴示例：

$(document).ready(function () {
var iframe = $('#player1')[0],
    player = $f(iframe),
    status = $('.status');

// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
    status.text('ready');

    player.addEvent('pause', onPause);
    player.addEvent('finish', onFinish);
    player.addEvent('playProgress', onPlayProgress);
});

// Call the API when a button is pressed
$('button').bind('click', function() {
    player.api($(this).text().toLowerCase());
});

function onPause(id) {
    status.text('paused');
}

function onFinish(id) {
    status.text('finished');
}

function onPlayProgress(data, id) {
    status.text(data.seconds + 's played');
}
 });

文档还表明：“您需要在 Web 服务器上运行，而不是直接在浏览器中打开文件。Flash 和 JS 安全限制将阻止 API 在本地运行时工作。”

不知道如何不直接用我的浏览器打开 js，因为有人建议我尝试在我的 ViewController 上更改这一行：

[_webby loadHTMLString:html baseURL:[[NSBundle mainBundle] bundleURL]];

到这样的事情：

[_webby loadHTMLString:html baseURL:[NSURL URLWithString:@"http://player.vimeo.com/"]];

也不适合我。

【问题讨论】：

标签： javascript ios api vimeo

【解决方案1】：

我遇到了类似的问题。我能够做到这一点：

你必须像你提到的那样用http://player.vimeo.com设置你的基本URL，否则它将不起作用。
我无法通过引用本地 js 文件使其工作。我不得不使用远程源。我的意思是：
```
<script src="http://f.vimeocdn.com/js/froogaloop2.min.js"></script>
```

我没有使用过 jquery，我摆脱了那个代码。基本上我的代码看起来像：

    var iframe = document.getElementById('player1');
    var player = $f(iframe);

    player.addEvent('ready', function()
    {
        sendNotification('onReady', '');

        player.addEvent('pause', onPause);
        player.addEvent('finish', onFinish);
        player.addEvent('playProgress', onPlayProgress);
    });

    function onPause(id)
    {
        sendNotification('onStateChange', 'paused');
    }

    function onFinish(id)
    {
        sendNotification('onStateChange', 'finished');
    }

    function onPlayProgress(data, id)
    {
        sendNotification('onPlayTime', data.seconds);
    }

    function sendNotification(action, data)
    {
        var message = {};

        message['action'] = action;
        message['data'] = data;

        window.webkit.messageHandlers.observe.postMessage(message);
    }

【讨论】：