Документация Vimeo API заставляет меня бегать по кругу, и я не могу понять, что делать.
Я хочу создать простую кнопку, которая воспроизводит мое видео. Может ли кто-нибудь привести голый пример этого? Это может помочь мне лучше понять, как работает этот API.
Спасибо!
Можно еще проще: у меня так работает (только одно видео на странице)
<iframe id="vid_id"
src="http://player.vimeo.com/video/123456789"
height="288" width="512" allowfullscreen>
</iframe>
<br>
<button onclick="play_video()">Button text</button>
<script>
function play_video() {
var player = document.getElementById("vid_id");
var data = { method: "play" };
player.contentWindow.postMessage(JSON.stringify(data), "*");
}
</script>
И, похоже, не нужны api=1 или player_id в вызове player.vimeo.com. Я тестировал его на IE8, IE11, Fx, Chrome, Safari, Opera.
(изменить позже): Android, кажется, другая история; Мне не удалось найти какой-либо работающий пример программного управления под Android. Я уведомил Vimeo об этом.
Я думаю, что документация Vimeo API тоже очень запутанная, поэтому я сделал это: http://labs.funkhausdesign.com/examples/vimeo/froogaloop2-api-basics.html
Это настолько голые кости, насколько это возможно.
Я хотел добавить кнопку воспроизведения/паузы, подобную этой, без использования jquery или froogaloop. Я не знаю почему, но я ненавижу включать библиотеку, когда мне это не нужно. Особенно для таких простых вещей.
Вот что я придумал (я просто публикую это для других людей, которые ищут):
<!DOCTYPE HTML>
<html>
<head>
<title>Vimeo Test</title>
<script language="JavaScript">
var iFram, url;
function startitup(){
iFram = document.getElementById('theClip');
url = iFram.src.split('?')[0];
}
function postIt(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}
if(url !== undefined){
iFram.contentWindow.postMessage(JSON.stringify(data), url);
}
}
</script>
</head>
<body onload="startitup();">
<iframe id="theClip" src="http://player.vimeo.com/video/27855315?api=1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen> </iframe>
<p><button onclick="postIt('play');">Play</button> <button onclick="postIt('pause');">Pause</button></p>
</body>
</html>
