I'm trying to use the API to play a video, but it only works after you click the play button in the player in iOS. In desktop and Chrome for Android, it is working fine.
http://codepen.io/bdougherty/pen/JgDfm
$(function() { var iframe = $('#player1')[0]; var player = $f(iframe); var 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() { status.text('paused'); } function onFinish() { status.text('finished'); } function onPlayProgress(data) { status.text(data.seconds + 's played'); } });
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> <iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <div> <button>Play</button> <button>Pause</button> <p>Status: <span class="status">…</span></p> </div>
Is there a workaround that I can use?