Videos should be viewable on target mobile devices

RESOLVED FIXED in 2.0

Status

Websites
demos.mozilla.org
P1
normal
RESOLVED FIXED
7 years ago
7 years ago

People

(Reporter: grlicky, Assigned: grlicky)

Tracking

unspecified
x86
Linux

Details

(Whiteboard: mobile)

(Assignee)

Description

7 years ago
We would like the videos on the site to be viewable on any of our target browsers. This actually excludes Fennec, since as Stuart let us know, video in Fennec is in a shaky state.

The method described at 	http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/ and demonstrated at http://broken-links.com/tests/video/ worked on the following browsers:
* Dolphin HD (on Droid 2)
* Skyfire (on Droid 2)
* Stock Android Browser (on Droid 2)
* Firefox for Mobile (works as good as I've ever seen video work on Fennec - which is not great)  (on Droid 2)
* Mobile Safari (on iPhone 4)

Noticeably, it did not work on Opera Mobile (on Droid 2). Aside from this, this technique has the best coverage out of any that I've seen. We should research what the problem with this technique is on Opera Mobile, and then implement it for videos on the site.
(Assignee)

Comment 1

7 years ago
A little more research has shown that the current version of Opera Mobile doesn't support video in any capacity, but that it is coming soon[1]. The video on http://opera.com/mobile doesn't even play in Opera Mobile, so I think we can safely assume that Opera users won't be expecting to watch videos on the site ;)

1) http://downloadsquad.switched.com/2010/12/06/opera-mobile-will-support-flash-and-html5-video-soon/
(Assignee)

Updated

7 years ago
Whiteboard: mobile

Comment 2

7 years ago
Jason and I discussed creating new "mobile optimized" video files, instead of re-encoding our existing files.

Jason will provide the settings, but the file should be named screencast_mobile.{ext} or documentary_mobile.{ext}

Comment 3

7 years ago
(In reply to comment #1)
Another angle, did we consider links below the video.
(mp4) (ogg) (webm)

If we are on a mobile device and we detect that HTML5 video won't work, or JavaScript is disabled, then show these three links in that order.

For Handsets that don't support HTML5 or Flash, then they can call the native media playback application.

Comment 4

7 years ago
Universal Subtitles throws errors on iPad.

After removing it... first load of html page with video tag and mp4 doesn't work. Hitting refresh the makes controls show up and video is playable :|

Comment 5

7 years ago
Created simple tests for Miro Coverter output going from our mp4 into
* ipad
* droid
* psp
* g1
etc

http://ozten.com/random/wow_mobile/

Comment 6

7 years ago
I only have an android and an ipad for Safari and stock android, these new formats (Comment#5) don't seem to help the video tag much.  

Most mp4 codecs work on both the ipad and android if you provide a direct link and spawn the native player. This is good and I've added a direct link for mobile requests.

I'm looking forward to jglicky's tests and everyone pointing their devices to these different test pages to share results.
(Assignee)

Comment 7

7 years ago
I put up a test page at http://people.mozilla.com/~jgrlicky/mobile_video_test/ , which seems to play video on every browser I've tried it on (except for Opera Mobile, of course, which doesn't play videos). It even played the video fullscreen on iPhone, Dolphin, Skyfire, and Android, which is really what we want on mobile. What worked:

On Droid 2:
* Android default Browser
* Dolphin Browser HD
* Skyfire
* Even Fennec!!

On iPhone 4:
* Mobile Safari

On Mac, tested just for kicks:
* Firefox 3
* Firefox 4
* Chrome
* Safari
* Opera

So this is good! The only thing I had to re-encode was the mp4 file. Thus, the video tag just has as a list of sources:
* screencast_mobile.m4v (re-encoded by following instructions below)
* screencast.ogv (existing video file)
* screencast.webm (existing video file)

Here are the instructions for re-encoding the mp4 file, taken from http://www.broken-links.com/2010/07/30/encoding-video-for-android/ :
1) Download Handbrake (http://handbrake.fr/) for Mac.
2) Set the video file as the source. For the test, since I didn't have the original video file, I just used the existing screencast.mp4.
3) Use the iPhone & iPod Touch preset (found in a drawer off to the right)
4) Check the "Web Optimized" option.
5) Set the Average Bitrate option on the Video tab to 960 (this is what it was in the existing mp4 file and it worked).
6) Under Picture settings, set the width to 480px and keep the aspect ratio.
7) Encode away! This can be saved as a preset, so you don't have to change the settings every time.

The next steps are to test this page further (on iPad or another android device would be nice) and then to take the important parts of this test page and apply them to the site.
Ok, I just did this for all the demos (screencasts + documentaries), mobile and desktop. 

We are missing:
Screencasts--Runfield mobile

Documentaries--CSS3D, DoubleUI, Planetarium, No Comply.
(Assignee)

Comment 9

7 years ago
Yay! Thank you so much Laura!!!

From testing it out, it seems like in addition to Runfield Mobile, we're also missing the screencast_mobile.m4v for Shadows and DoubleUI. Also, the Dashboard-Mobile video in particular doesn't seem to be able to be played on Android. Would you mind giving creating the screencast_mobile.m4v for that demo another shot?
(Assignee)

Comment 10

7 years ago
Ok, with https://github.com/mozilla/webowonder/commit/6c096d6ca4cd0a346c5796bf5c990e3a70dbb205, mobile video support is in the code, so once we get all the videos working properly as per Comment #9, we'll be all set to go on this!
(In reply to comment #9)
> Yay! Thank you so much Laura!!!
> 
> From testing it out, it seems like in addition to Runfield Mobile, we're also
> missing the screencast_mobile.m4v for Shadows and DoubleUI. Also, the
> Dashboard-Mobile video in particular doesn't seem to be able to be played on
> Android. Would you mind giving creating the screencast_mobile.m4v for that demo
> another shot?

Sure--I'll do this tomorrow ;)
(In reply to comment #9)
> Yay! Thank you so much Laura!!!
> 
> From testing it out, it seems like in addition to Runfield Mobile, we're also
> missing the screencast_mobile.m4v for Shadows and DoubleUI. Also, the
> Dashboard-Mobile video in particular doesn't seem to be able to be played on
> Android. Would you mind giving creating the screencast_mobile.m4v for that demo
> another shot?

So, just loaded letterheads and dashboard mobile. DoubleUI, however, was already there. It's in the double ui-mobile folder. Can you re-check?

Updated

7 years ago
Group: mozilla-corporation-confidential
(Assignee)

Comment 13

7 years ago
Ok, as of right now, as far as I can tell the only videos missing are for runfield-mobile. I think we can close this bug out once we get those uploaded and make sure they work!
(In reply to comment #13)
> Ok, as of right now, as far as I can tell the only videos missing are for
> runfield-mobile. I think we can close this bug out once we get those uploaded
> and make sure they work!

Will upload shortly. Busy day today ;)
(In reply to comment #14)
> (In reply to comment #13)
> > Ok, as of right now, as far as I can tell the only videos missing are for
> > runfield-mobile. I think we can close this bug out once we get those uploaded
> > and make sure they work!
> 
> Will upload shortly. Busy day today ;)

Completed.
(Assignee)

Comment 16

7 years ago
Yay, thank you Laura!
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.