Guten Morgen zusammen,
ich arbeite erst seit kurzem mit der API von Vimeo und hänge gerade an einem Problem fest. Die Seite startet mit einem Video welches über ein iframe eingebunden wird. Diesem Player teile ich events zu, z.B. Start und Pause.
Ein Klick auf den Text "LOAD FILM 3718294" lädt dynamisch einen anderen Film in den Player. Nun funktionieren die Events allerdings nicht mehr. Übersehe ich einen Fehler? Hat jemand mehr Erfahrung mit der API? Ich freue mich über jede Hilfestellung.
Hier der Code:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vimeo test</title>
</head>
<body>
<div id="vimeoContainer">
<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="925" height="520" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<div class="addClip" id="vimeoid_3718294">LOAD FILM: 3718294</div>
<script src="fileadmin/lib/javascript/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="fileadmin/lib/javascript/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="fileadmin/lib/javascript/froogaloop.min.js" type="text/javascript"></script>
<script>
function initVimeoPlayer() {
var iframe = document.getElementById('player1'), player = $f(iframe);
// When the player is ready, add some listeners
player.addEvent('ready', function() {
console.log('player ready, add other events');
player.addEvent('play', onPlay);
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
});
function onPlay(id) {
console.log('player started');
}
function onPause(id) {
console.log('player pause');
}
function onFinish(id) {
console.log('player finished');
}
}
function loadMovie(vimeoID) {
$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/'+vimeoID) + '&width=925&height=520&callback=?', function(data){
$('#vimeoContainer').html(data.html);
$('#vimeoContainer').find('iframe').load(function(){
player = this;
$(player).attr('id', 'player1');
$f(player).addEvent('ready', function(player) {
console.log('player ready!'); /* This event works! */
player.addEvent('play', onPlay); /* Didn't work (TypeError: player.addEvent is not a function) */
});
function onPlay(id) {
console.log('player started');
}
});
});
}
$(document).ready(function() {
initVimeoPlayer();
$('.addClip').click(function() {
var splID = this.id.split('_');
loadMovie(splID[1]);
});
});
</script>
</body>
</html>
Danke und Gruß,
Lukas
26.09.2013, 09:33
Vimeo Problem: Events funktionieren nach geladenem Film nicht mehr
Ähnliche Themen
Linear-Darstellung
