Web and WebWorks Development

[JCarty]

Hey guys I'm having an issue with HTML5 video. If the video is set to autoplay, it sits within its designated area just fine. However, if its not set to autoplay and i trigger play via JavaScript, it opens the video fullscreen.

This is not my expectation. Has anyone experienced this before? How do I work around it? I've tried *almost* everything to no avail.

Thanks.

Device:  BlackBerry 10 Dev Alpha B

OS: 10.0.9.1675

[oros · Accepted solution]

In short, <video> elements have play() called on them go fullscreen by design. We can prevent this currently by modifying the currentTime attribute slightly, then calling play():

video = document.getElementById("player");
document.querySelector('#play').addEventListener('click', function () {
	if (video.currentTime === 0) {
		video.currentTime = 5;
	}
	video.play();
}, false);

 An official flag to prevent fullscreen has been requested but hopefully that does the trick for now.

[JCarty]

That helped. Thanks Erik!

[andreyavram]

Looking forward for a resolution to this, also.

Any official updates on this?

[oros]

Thanks for bringing this up! There actually is an update.

You can play video as you see fit now (autoplay, user interaction, etc.) and can avoid fullscreen by specifying the webkit-playsinline property which was implemented as a result of this initial issue. Sample usage:

<video webkit-playsinline></video>

[andreyavram]

The workaround is nice, but unfortunately not useful to me. I'm using the YouTube API and the video tag is created by their script, I have no control over it.

I hoped for a setting/flag in config.xml , I strongly believe it would be more useful as a global application setting.

[oros]

Ah, I see.

Does the API embed the <video> in an <iframe>? Or does the video start playing before you can get a handle on the element and inject the attribute yourself? Those would be the two most likely (major) concerns; otherwise injecting the attribute might be an option...

[andreyavram]

I managed to solve the issue. Yes, the api was creating an iframe, injecting was not an option.

[oros]

Right on, glad to hear! Mind sharing the solution in case another dev comes by with something similar?

[andreyavram]

Using the initial solution you posted above