Has anyone found a solution to disable videos from going fullscreen automatically in iOS 10? We have a video quiz feature in our web app that requires videos to stay inline so that the answers can be seen. We embed a video hosted with JW Player with controls disabled and then interact with the video to display the start/stop points and answers with custom javascript. This new feature in iOS 10 has made taking our quizzes very difficult.
You could use something like this:
var playerone = jwplayer(“container”);
playerone.setup({
file:“http://content.jwplatform.com/manifests/PxnoM5gE.m3u8”,
mediaid:“PxnoM5gE”,
image:“https://dr56wvhu2c8zo.cloudfront.net/kungfury/assets/e6ed817b-3525-45e2-bf11-6cc755c1b853/sdggfdsagsd.jpg”,
title:“KUNG FURY”,
description:“It takes a cop from the future to fight an enemy from the past.”,
width:‘50%’,
aspectratio:‘16:9’,
}).on(‘ready’,function(){
playerone.getContainer().getElementsByTagName(‘video’)0.setAttribute(‘playsinline’, ‘playsinline’);
Thanks, George. Can this be done using the JS embedded player as well? If so, how would I set the "playsinline" attribute in that scenario.
You would use jwplayer().getContainer() provided the player has been loaded.
I still haven't been able to get this to work - the code I am using is below. I really need the video to play inline from the start. I opened a ticket with JW support 4 days ago but still haven't received a response.
<!--JW Player Embed-->
<script type="text/javascript" src="http://content.jwplatform.com/players/Jm7ADGXR-cJQcny5R.js"></script>
<!--Play Video Inline-->
<script type="application/javascript">
jwplayer().getContainer().setAttribute('playsinline', 'playsinline');
</script>
Hi,
You’ll most likely have to use the javascript setup block since you’ll have to wait for jwplayer().on(‘ready’) before you getContainer()
I appreciate your help but I still cannot get it to work. I think I have set up the javascript block correctly with the code you sent but the video is not loading. For reference, I am including my test pages so you can see what I am trying to do.
Desired Behavior: http://www.kpreps.com/jwplayer/video-quiz.html
New "playsinline" Code: http://www.kpreps.com/jwplayer/video-quiz-ios10.html
Hello Andy,
So I found why it wasn’t working. You were using JW6, the API call was in JW7 syntax. Please upgrade to JW7 and it should behave as expected.
http://qa.jwplayer.com.s3.amazonaws.com/~george/basketball.html
else you could use jwplayer().onReady() and maybe a setTimeout if the player isn’t ready at the moment, also you’ll want to make sure you are using JW6 in HTML5 mode, else there won’t be a video tag.
Thanks, George. The link you sent still goes full screen when I view it in Safari on iOS 10. Also, the link I sent that was not working correctly was using a new JW7 player.
If I continue to use JW6, do I just need to include data-type="html5" in my video container div to force HTML5 mode?
Hello Andy,
I made a mistake in the code, it should play inline now.
http://qa.jwplayer.com.s3.amazonaws.com/~george/basketball.html
As far as JW6 goes, I guess it really depends on the content. If it’s going to be MP4 it will play in HTML5 in Safari iOS and Desktop, the only difference would be HLS on desktop, that would require flash. You could use primary:“html5” in your setup block for JW6
Got it! Thanks very much, George.
Awesome, glad we were able to fix this. (thumbs up)
Will playsinline become available as a setup option in a future player version?
Hello Joffrey,
This feature should be apart of our 7.7 RC which should be finalized toward the later portion of this week. You can also check our release notes here which details other feature embeds: Release Notes.
Randy
