If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
JCarty
Posts: 1,055
Registered: ‎01-25-2009
My Device: BlackBerry Bold 9650/BlackBerry Torch 9800
Accepted Solution

HTML5 Video issue

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

Jerome Carty - Follow jcarty on Twitter@jcarty | #webworks-dev / #BlackberryDev on irc.freenode.net | My Apps
Click "Accept as Solution" if post solved your original issue.. Give like/thumbs up if you feel post is helpful
Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,556
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: HTML5 Video issue

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.


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Developer
JCarty
Posts: 1,055
Registered: ‎01-25-2009
My Device: BlackBerry Bold 9650/BlackBerry Torch 9800

Re: HTML5 Video issue

That helped. Thanks Erik!
Jerome Carty - Follow jcarty on Twitter@jcarty | #webworks-dev / #BlackberryDev on irc.freenode.net | My Apps
Click "Accept as Solution" if post solved your original issue.. Give like/thumbs up if you feel post is helpful
Please use plain text.
Regular Contributor
andreyavram
Posts: 76
Registered: ‎06-02-2012
My Device: Playbook, BB10
My Carrier: Orange

Re: HTML5 Video issue

[ Edited ]

Looking forward for a resolution to this, also.

Any official updates on this?

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,556
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: HTML5 Video issue

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>

 


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Regular Contributor
andreyavram
Posts: 76
Registered: ‎06-02-2012
My Device: Playbook, BB10
My Carrier: Orange

Re: HTML5 Video issue

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 :smileyhappy:, I strongly believe it would be more useful as a global application setting.

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,556
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: HTML5 Video issue

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...


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Regular Contributor
andreyavram
Posts: 76
Registered: ‎06-02-2012
My Device: Playbook, BB10
My Carrier: Orange

Re: HTML5 Video issue

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

Please use plain text.
BlackBerry Development Advisor
oros
Posts: 1,556
Registered: ‎04-12-2010
My Device: BlackBerry Z10
My Carrier: Bell

Re: HTML5 Video issue

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


Erik Oros | @WaterlooErik | eoros@blackberry.com | Developer Issue Tracker

If a reply has answered your question, please click Accept as Solution to help other visitors in the future.
Please use plain text.
Regular Contributor
andreyavram
Posts: 76
Registered: ‎06-02-2012
My Device: Playbook, BB10
My Carrier: Orange

Re: HTML5 Video issue

Using the initial solution you posted above :smileyhappy:

Please use plain text.