Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Twice click needed to start JW Player on mobile devices

Hello,

Since a lot of our pages contain several video and audio elements, we decided to instantiate JW Player objects only after the user clicked on a "play" button, placed inside an image placeholder. Our main problem with this solution is, that the "autostart" property of JW Player does not work on mobile devices. While a newly instantiated JW Player, with "autostart" set to true, starts playing automatically on any desktop system, this does not work on any of our tested iOS and Android devices. Here the user has to tap again on the play button that is owned by the newly created JW Player object.

Due to this issue we decided to disable JW Player on mobile devices in favour of native HTML5 audio/video tags. After creating a native audio/video tag, we can call the "play" method on this element and the respective player starts playing immediately. On the contrary, calling the play method on a newly instantiated JW Player causes the player to endlessly show a loading animation.

See these examples with your iOS/android device:

Setup with JW Player:
http://webdesign.rbb-online.de/universalplayer/clicktwice/

Setup with native audio/video elements:
http://goo.gl/Dx3Jue
(redirects to http://www.rbb-online.de/imparlament/berlin/2014/20--maerz-2014/20-03-2014---45--Sitzung-des-Berliner-Abgeordnetenhauses/michael-garmer--cdu----as.html)

Is there any solution on mobile devices to automatically start a newly instantiated JW Player?

Best regards
Sebastian

5 Community Answers

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Autostart is disabled in devices by html5 <video> natively, not just the player.

What you can do here is set up the player in a hidden div on the page, then call play() on the image, which also reveals the player, that will work.

Up Down

JW Player

User  
1 rated :

I can confirm that autoplay is not enabled for mobile devices, regardless of whether JWPlayer is used or not.

I also had issues with requiring two taps or clicks to engage the video, and Ethan's suggestion - while not ideal as you would like JW to handle this automatically - did work. In my case, I am using JWPlayer v5.10.

The general structure looked like this:
bc.. <div id="placeholder">
<img src="video-thumbnail.jpg">
</div>
<div id="videoplayer"></div>



jwplayer setup:
bc.. jwplayer('snr_videoPlayer').setup({
'allowscriptaccess': 'always',
'image': 'video-thumbnail-2.jpg',
'file': 'my-video.mp4',
'autostart': 'false',
'controlbar': 'over',
'icons': 'true',
'volume': 100,
'width': 1024,
'height': 576,
'stretching': 'fill'
});



Event binding:

bc.. var placeholder = document.getElementById('placeholder');
placeholder.addEventListener('click', handler, false);
var handler = function() {
var video = document.getElementById('videoplayer');
video.style.display = 'block';
jwplayer('videoplayer').play();
}



Forgive any errors as I adapted that from my working version on the fly, but that should work. It also assumes some css styles are in place on page load, like: bc.. #placeholder { display:none; }


Again, this works but it would be nice to see legacy versions of JW adopt these fixes automatically, as they often deal with the most common use cases and therefore make the value of using a platform like JWPlayer take up more of our time than we wanted when we bought into it.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Glad you got it, thanks for sharing.

Up Down

JW Player

User  
0 rated :

FYI, just noticed that the jwplayer object in the second block of code above should have read: bc.. jwplayer('videoplayer').setup({...
not: bc.. jwplayer('snr_videoPlayer').setup({...

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Ah, ok.

This question has received the maximum number of answers.