• Skip to main content
  • Skip to footer
  • WordPress Training
  • About
  • My Journal
  • Say Hello

Alison Foxall

WordPress Teacher, Web Developer, Designer, and Inbound Marketer

You are here: Home / Web Tricks / Open source HTML5 code for embedding iPad video player

August 28, 2010 By Alison Foxall 7 Comments

Open source HTML5 code for embedding iPad video player

Recently I had the opportunity to build an HTML5 video player for the iPad. I wanted to share the code and markup with you all since I never got to use it. Just to make sure you all know, this is just specifically for the iPad since a presentation was supposed to be given on it. Nothing fancy. I just wanted it to play a video:

[html]
<!DOCTYPE html>
<head>
<meta charset=”utf-8″>
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<title>My Video</title>
<link rel=”apple-touch-icon” href=”icon.png” />
<style>
body {margin:0;}
</style>
</head>
<body>
<video width=”1024″ height=”750″ controls=”true”>
<source src=”videos/video-name.mov” /><!– WebKit video –>
</video>
</body>
</html>
[/html]

So let’s take a look at this.

New HTML5 Doctype

<!DOCTYPE html> is the new HTML5 doctype which is reverse compatible, so you can start using it now if you’d like. I think the rest of the markup is pretty self-explanatory.

Apple iPad meta tags for controlling the viewport / iPad in full-screen mode

The apple meta tag controls whether or not to put mobile Safari into fullscreen mode– or removing the address bars from Safari. Also note the link in the head to the apple icon. This is just incase the user bookmarks the page on their iPad home page, they’ll have a custom icon to look at.

Native Video Player for HTML5

The video tag enables you to play a video right in the browser without any third-party plugins like Flash, etc. This tag is also reverse compatible too. If the browser does not support HTML5, then you can place an object like Flash into the video tags just in case. And just like Flash, you can place alternate content in those tags just in case the use doesn’t have Flash! In this particular example, I have not done this since this was just specifically for the iPad. Please note the video file format as well. This video format will only play with Safari. For firefox you’ll need to use a convertor to convert to and .ogg file.
Also as a side note, don’t forget about compression. Some compression methods are acceptable, while others are not. You should be safe with just regular MPEG compression.
So have fun, learn something, and have at it. For more resources on building web apps for mobile safari, visit The Safari Reference Library. Great resources there!
I’m sure by the time you read this there are a million free HTML5 video resources out there. When I did this, I had a hard time finding information on putting the iPad in full screen mode. I didn’t know that it was called the “viewport.” If you haven’t already, I’d also register on Apple as a developer and download the SDK so you can use the iPad/iPhone simulator.
Cheers!

Filed Under: Web Tricks Tagged With: apple, html5, ipad in full screen mode, ipad video player, mobile safari, safari, snippets, web tricks

Reader Interactions

Comments

  1. Eric says

    August 24, 2011 at 5:51 pm

    What are you using to display code in your blog posts? Looks great!

    Reply
    • Alison Foxall says

      August 25, 2011 at 9:26 am

      Thanks Eric. It’s called “SyntaxHighlighter Evolved”

      Reply
  2. Norma Stevens says

    February 18, 2013 at 4:17 pm

    I have the html code for music on my web site but I cannot get the music to play on any of the notepads, Ipad, Visual Land, etc. Could you please send me the html code that I can have for my web pages and for the notepads both to hear.
    Thank you so much.
    Norma

    Reply
  3. Larry Wieland says

    July 25, 2013 at 3:49 pm

    I am attempting to develop a web app using HTML5 video to run on the iPad, and I am encountering the same problem as Norma – the sound of the video won’t play, though it works just fine on other platforms. I have isolated the problem to the tag. Without the tag the page runs in the regular iPad Safari browser (even if you have saved it to the desktop). and the sound plays just fine. I have ios version 6.1.3 running on my iPad. So Allison, do you know what version of ios you were running when it worked? I strongly suspect it’s a bug in the version of ios that I am running, and I want to nail down as many details as I can before I submit the bug to Apple.

    Reply
  4. Bill W. says

    August 22, 2013 at 7:03 pm

    Thanks so much. Working great. Is there a way to code in auto play?

    Reply
  5. Norman Risner says

    September 16, 2013 at 2:21 am

    Does all browsers today play HTML5 video?

    Reply
  6. Norman Risner says

    October 14, 2013 at 7:02 pm

    Does this work on Windows OS as well?

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

Address & Contact

 

Email Me

Copyright © 2023 · Alison Foxall