Follow this blog with bloglovin

Follow kimcrawley.com- Bright Ideas

Tuesday, September 21, 2010

Getting ready for HTML5- The video tag...



 I promised you I would do a post on the new <video> tag that debuted in HTML5.  Well, here it is!


 It's kind of apropos because my last two posts featured embedded videos.  But they were both taken from Youtube, by embedding their Flash applets.


 With the <video> tag, you can embed a video the same way you would an image.


<video src="movie.ogg" controls="controls">
your browser does not support the video tag
</video>


 The text between <video> and </video> will display in your browser if your browser doesn't support HTML5.  If your browser does support HTML5, the text won't display, but the video will. 


 There is currently uncertainty about which video formats will be supported, but we can be pretty sure that the .ogg format will be supported, as it's a license free format.


 Here are some attributes for the new <video> tag:


  • autoplay - The video will play as soon as it's ready
  • controls - Display controls under the video, including play and pause
  • loop - Continuously replay the video
  • preload - This cancels out 'autoplay', the video will download when the webpage is downloaded, and will wait for the user to click 'play'
  • src - Just like the <img> tag, you should use this attribute to enter the URL for the video. Example: <video src="http://www.kimcrawley.com/thisvideodoesntexistyet.ogg">
  • width - Set the width for the video in number of pixels


 I'm excited about getting to use this tag and the other tags that are new to HTML5.



 Read the posts I have so far about my Project HTML5:










kimcrawley.com



twitter.com/kim_crawley

No comments:

Post a Comment