
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.