Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML HTML Video and Audio (Retired) Media Basics The Source Element

Jeff Sayre
Jeff Sayre
4,086 Points
Posted by Jeff Sayre
Jeff Sayre
4,086 Points

Does mp4 not work on mobile? My video works just fine on desktop but I get a black box when I view it on mobile.

Is there something different we have to do to get a video to work well on mobile devices?

3 Answers

wuworkshop
wuworkshop
3,429 Points
wuworkshop
wuworkshop
3,429 Points

Unfortunately, different browsers support different video formats (WebM, mp4, ogg/theora) so you will probably need to convert your mp4 to all the different formats if you want it to work cross-browser. Read more details on CanIUse.com:

http://caniuse.com/#feat=video

Jeff Sayre
Jeff Sayre
4,086 Points
Jeff Sayre
Jeff Sayre
4,086 Points

Cool site. It seems to be a little bit more complicated than that though... I found this post explaining it pretty well.

http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

Although, even when I do it, the video is extremely low quality on mobile (mostly black with the moving portions slowly becoming clearer).

wuworkshop
wuworkshop
3,429 Points

Another good resource that has some additional useful links that might help you is HTML5 Please:

http://html5please.com/#video

Jeff Sayre
Jeff Sayre
4,086 Points
Jeff Sayre
Jeff Sayre
4,086 Points

Thanks imouto. I appreciate the answers! I'm still not sure what the problem is, I have multiple formats of the video available, but I'll keep looking into it.

wuworkshop
wuworkshop
3,429 Points
wuworkshop
wuworkshop
3,429 Points

No problem. So I had been answering this thread just based on my own experience without actually looking at the course you referenced. I just now looked at the course you're doing and at a later stage it actually goes over various HTML5 media players and uses a specific one for the course. See this video:

http://teamtreehouse.com/library/html-video-and-audio/custom-media-players/overview-of-video-players

The Teacher's Notes has a link to a nice comparison table of various HTML5 media players over here:

http://praegnanz.de/html5video/

The course and the Treehouse site are using the popular MediaElement.js. You might want to try out different players to see if that improves playback. Also, did you watch the different video formats after conversion to make sure they converted okay?