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
New Contributor
webworksdev
Posts: 2
Registered: ‎07-20-2013
My Device: BB10 Z & Q
Accepted Solution

HTML5 Video tag and Webworks.

Hello,

 

I am trying to build a webworks app that supports video playback for MP4 format (possibly with an FLV fallback). The video tag works flawlessly in the ripple emulator (on chrome).

 

On the device (both BB10 Z - Dev Alpha B and BB10 Q) the video poster appears, and on video playback the video disappears. The audio continues the play, but there is no visible video. On pressing the back button in the action bar, a few times the video reappears and plays properly.

 

The video disappears again when restarting to seeking to the beginning of the video.

 

This does not seem to be linked to any specific video as I have tried videos hosted on several different servers.

 

The simplest version of the code looks something like this:

 

var video = document.createElement('video');
video.src='http://video-js.zencoder.com/oceans-clip.mp4';

video.controls = true;

$(PageRoot).find("#maincontent").append(video);

 

Please help.

Is there another / better way of achieving video playback?

 

Thanks,

webworks dev.

BlackBerry Development Advisor
anzor_b
Posts: 165
Registered: ‎09-24-2012
My Device: Passport

Re: HTML5 Video tag and Webworks.

Hi webworksdev,

 

Have you tried using a local .mp4 file bundled with the application? Not sure if you are aware, but the video url you provided does not work in Chrome either.

 

Grab the big buck bunny video file from here: http://www.bigbuckbunny.org/index.php/download/

Bundle with app, and reference as video.src="relative_path_to_video.mp4" and let us know how it behaves. 

New Contributor
webworksdev
Posts: 2
Registered: ‎07-20-2013
My Device: BB10 Z & Q

Re: HTML5 Video tag and Webworks.

Hey anzor_b,

 

Thanks for your response. The url works for me in chrome, just checked it.

 

Anyways, I figured out the issue using web inspector. The video tries to go fullscreen when played and hides behind the page. I've set it to play inline for now using "webkit-playsinline" on the video tag.

 

I think it's just some CSS (I suspect z-index of the bb-screen), but I'll get to it later.

 

Thanks again,

webworksdev.