Showing posts with label video. Show all posts
Showing posts with label video. Show all posts

Thursday, October 25, 2012

HTML Video: Part 2


already wrote a post on HTML5 video. This expands on it and explains things like auto play. 
Master Code + controls = auto play, loop

To add loop, auto play and "poster" or image that's shown when the video first loads, use this code:
<video poster="thumbnail.png" autoplay loop controls tabindex="0">
  <source src="vide.webm" type="video/webm"; codecs="vp8, vorbis" />
  <source src="video.mp4" type="video/mp4"; codecs="theora, vorbis" />
</video>

Replace thumbnail.png with the URL of the pic you want to display when the video is first loaded, video.webm with the URL of the webm version of your video, video.mp4 with the URL of the mp4 version of your video. The autoplay and loop controls set what they sound like: autoplay making the video play upon loading and loop making the video repeat. More on HTML5 video is available at my former post.


Desktop

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
HTML5 video20.012.09.012.05.1

Wednesday, September 26, 2012

HTML5 Video

Html5 is a modern code supported by modern browsers such Opera12+ Internet Explorer 10, Mozilla Firefox 14+, Internet Explorer 10 and Google Chrome 18+. This is the video code. The video file should be Webm or mp4 for best support. If you can have your video in both file formats, that's great because then, if one browser doesn't support a file type, it will use the other. The basic code is: 
<video src="videoURL"></video>

If you have mp4 and webm the master code is this:

<video>
  <source src="videoURL.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="videoURL.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  Sorry, you're using an outdated browser! Upgrade to a fast, free web <a href="http://opera.com">here</a>.
<video>


This is the HTML5 video code. Much more simple than you thought?

Desktop

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Video element20.0
12.0
9.0
12.0
5.1