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

Unable to exit video in mobile safari on ipod/iphone

I am setting up part of a web app to work for mobile devices. I have a very basic set up so far that just displays the video:

jwplayer("player_body").setup({
"playlist": [{
file: "http://www.youtube.com/watch?v="+video.id
}],
width: "100%",
aspectratio: "16:9",
repeat: false,
allowfullscreen: true,
mute: false,
events: {
onPlaylistItem: function(event) {
console.log("Player onPlaylistItem: " + JSON.stringify(event))
},
onError: function(event) {
console.log("Player onError: " + JSON.stringify(event))
},
onPlay: function(event) {
console.log("Player onPlay: " + JSON.stringify(event))
}
}
});

When the page with the video is brought up by scanning a qr code (on an ipod touch) the video exits fine. Although for some reason changing the orientation of the phone automatically starts playing the video, and when the video plays it jumps into fullscreen QuickTime player on iphone/ipod (unavoidable... Arggg).

But when I load the url directly into Safari on either iphone 5, iphone 6, or new ipod touch (ios 8.1.3) once the video is started you can never exit it...

The minimize/exit fullscreen button is completely non-responsive.

When pressing "Done"
1. the video pauses
2. the video minimizes
3. the video automatically starts playing again and goes back to fullscreen

There is no way to get out of the loop without reloading the page.

I have been looking all over for ways to get around this, and most of the posts I found were about adding event handlers (specifically for webkitbeginfullscreen and webkitendfullscreen) to the html5 player.

But they all seem outdated (2010-2012) and none were specifically addressing this issue or using the JW player. Also from what I could tell based on posts about the JW player, there is on longer a way to attach event handlers to the JW player (since around April 4, 2014?).

If anyone has encountered this and found a work around I would greatly appreciate any insight.

8 Community Answers

Up Down

Todd

JW Player Support Agent  
0 rated :

I’ve experienced this behavior on all sorts of videos where pressing the Done button on a video in iOS does nothing. As you noted, these videos are loading via the iOS native player automatically. This is honestly not caused by our player. I usually have to force quit Safari before I can resume my web browsing.

My guess is we will need to wait for Apple to release an iOS update that resolves this issue.

Up Down

studentatmc

User  
0 rated :

Thanks for the response. The thing that is getting to me is that it happens EVERY time for any youtube video url loading up in Safari...

It works completely fine, when loaded up using the free app "qr scanner" (on an ipod touch). Which means it has to be opening it in a stripped down version just using just webkit or something?

It is only when you open it using Safari that the player does this weird behavior. And from what I have been told iphones automatically open it using safari, which leads anyone on an iphone to trigger this behavior.

Obviously everything is running fine on the Android devices since it does not use its native player.

Also there doesn't seem to be any way to attach the event handlers I have seen to try to track the native player going into fullscreen mode to the JW player. Is there anyway to attach event handlers to try to debug what is happening?

Up Down

studentatmc

User  
0 rated :

So in the meantime I have been trying to get the video to run on the ipod using different (open source) video players. Most seem to try to run in flash so they don't work on iphones like the YT player.

But after implementing mediaelementjs.com it worked, no issues in safari either. So unfortunately I think this is something that is specific to your player conflicting with exiting/minimizing a youtube video, on ios mobile Safari.

Up Down

Todd

JW Player Support Agent  
0 rated :

Thanks for doing some extra research on this. I’ll report this as a bug. Hopefully either an update to iOS or our player will resolve this issue.

Up Down

arun.saini07

User  
0 rated :

I am facing similar issue with playing youtube with jwPlayer on iPhone 6 plus.

After playing a video, and then pressing Done on native player, video gets paused and goes back to the webpage.
Now when user changes orientation of the device, the video again starts playing on native player.

I checked the demo page on jwPlayer with embedded video. It does not has this issue.

Thanks
Arun

Up Down

arun.saini07

User  
0 rated :

Hey Team,

I found the issue is present when I am using initial-scale for viewport meta tag.

Thanks
Arun

Up Down

arun.saini07

User  
0 rated :

Hi Team,

This issue is also visible on android device.

Please let us know if a bug has been raised.

Following is the code I am trying

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1">
</head>
<body>
<div id='playerrWixsNECPXGX'></div>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
<script src='./jwplayer/jwplayer.js'></script>

<script>


jwplayer.key = 'cg3CgjkLbvkl6JZUZgPCsuizSH2T0/WzL3dMbw==';

jwplayer('playerrWixsNECPXGX').setup({
file: '//www.youtube.com/watch?v=wXe-4kbrAXA',
title: 'Demo Page',
autostart: true,
controls: true,
repeat: true,
primary: 'html5',
width: '100%',
aspectratio: '16:10'
});

</script>
</body>
</html>

Thanks
Arun

Up Down

arun.saini07

User  
0 rated :

Hi Team,

I hope you are following this post.

Thanks
Arun

This question has received the maximum number of answers.