Several users of my Vimeo Channel Gallery plugin mention that this is not working correctly. In the documentation about Player embedding on Vimeo, regarding the autoplay parameter I use for playing the video, you can read: ‘Play the video automatically on load. Defaults to 0. Note that this will not work on some devices’. Apparently, it is said it cannot work on certain devices, but, what it is sure, given the tests performed, it is that it does not work on certain browsers either. I think it is quite poor that, such an important site as Vimeo, does not specify which devices are referred to.
And that is why I am going to try the Vimeo Player JavaScript. When I started with the plugin I had discarded using the API because it did not provide any method to play a particular video. The only thing offered is the ‘play’ method to reproduce the current video, so the only option left to use it is to modify the player iframe, which must have the following format:
|
1 |
http://player.vimeo.com/video/VIDEO_ID?api=1&player_id=vimeoplayer |
To use the API you have to activate it adding api=1 to the iframe URL and if we are going to have several players in the same web page, we must add to this URL a player_id with the same value of the iframe id.
To allow the connection with the iframe in a secure way, the Vimeo API uses the JavaScript postMessage method, with which we will be able to know the status of the player, which could be one of the following: ready, playProgress, pause, finish. To start the reproduction of the player we will have to wait for the ‘ready’ state, as if we do it before that, the reproduction will fail.
I have created a simple prototype to show the load of different videos on the same player, in order to check the player API use. Also, player status and API methods are shown.
|
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'); } }); |
