Varios usuarios de mi plugin Vimeo Channel Gallery comentan que el plugin no les funciona correctamente. En la documentación sobre embedding del player de Vimeo, sobre el parámetro ‘autoplay’ que uso para reproducir el vídeo dice lo siguiente ‘Play the video automatically on load. Defaults to 0. Note that this won’t work on some devices’. Al parecer nos dicen que puede no funcionar en ciertos dispositivos, pero lo que está claro, por las pruebas que he realizado, es que no funciona tampoco en ciertos navegadores. Que un sitio de la magnitud de Vimeo no especifique a qué dispositivos se refiere me parece algo pobre. Por ello, voy a probar a usar el JavaScript API del player de Vimeo. Cuando empecé con el plugin había descartado usar la API porque no ofrecía ningún método para reproducir un determinado vídeo. Lo único que nos ofrece es el método play() para el reproducir el vídeo actual, así que la única opción que nos queda para usarlo es modificar la url del iframe del player que debe tener el siguiente formato:
|
1 |
http://player.vimeo.com/video/VIDEO_ID?api=1&player_id=vimeoplayer |
Para usar la API hay que activarla añadiendo api=1 a la URL del iframe y si vamos a tener varios players en la misma página debemos añadir a esta URL un player_id con un valor igual al id del iframe.
Para permitir la comunicación con el iframe de forma segura la API de Vimeo usa el método postMessage de JavaScript, con el cual podremos conocer el estado del player, que dispone de los siguientes estados: ready, playProgress, pause, finish. Para iniciar la reproducción del player tendremos que esperar al estado ready ya que si lo hacemos antes la reproducción fallará.
He creado un sencillo prototipo para mostrar la carga de distintos vídeos sobre el mismo player para comprobar el uso de la API del player. Además, se muestran los estados del player y métodos de la API.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
$(function(){ var f = $('#vimeoiframeId iframe'), url = f.attr('src').split('?')[0], status = $('.status'), action; // Listen for messages from the player if (window.addEventListener){ window.addEventListener('message', onMessageReceived, false); } else { window.attachEvent('onmessage', onMessageReceived, false); } // Handle messages received from the player function onMessageReceived(e) { var data = JSON.parse(e.data); switch (data.event) { case 'ready': onReady(); break; case 'playProgress': onPlayProgress(data.data); break; case 'pause': onPause(); break; case 'finish': onFinish(); break; } } // Call the API when a button is pressed $('#playlinksId a').on('click', function() { var currentIframeId = $(this).attr('id'); var currentSrc = $(this).attr('src'); var currentvideoId = currentSrc.substring(currentSrc.lastIndexOf('/') + 1); f.attr('id', currentIframeId); f.attr('src', 'http://player.vimeo.com/video/' + currentvideoId + '?api=1&player_id='+ currentIframeId); action = 'play'; }); $('#playId').on('click', function() { post('play'); }); $('#pauseId').on('click', function() { post('pause'); }); // Helper function for sending a message to the player function post(action, value) { var data = { method: action }; if (value) { data.value = value; } f[0].contentWindow.postMessage(JSON.stringify(data), url); } function onReady() { status.text('ready'); post('addEventListener', 'pause'); post('addEventListener', 'finish'); post('addEventListener', 'playProgress'); if(action){ post(action); } } function onPause() { status.text('paused'); } function onFinish() { status.text('finished'); } function onPlayProgress(data) { status.text(data.seconds + 's played'); } }); |
