Cross browser HTML5 videos

Cross browser HTML5 videos
by Janeth Kent Date: 06-06-2013 html5 web tutorials html tools web design web development

For many years, Flash has been the most popular video solution on the web.

With HTML5 a new specification is born: HTML5 videos.

In this tutorial, we’ll show you how to use HTML5 to display videos on your website.

Step 1: Preparing files

The first thing to do is to make sure your files are in the right format for HTML5 video playing. Right now, there’s no standard format so this is the biggest problem with HTML5 videos right now.

You’ll need these formats:  .mp4 (or .m4v) which is used on Apple products such as iPads, Safari, etc. The second format is .ogv, an open-source format used by Firefox. And the last one is .webm.

Converting your file into those formats is pretty easy if you use this very handy tool named Video Converter.

Step 2: Coding

Below you can find the basic code for displaying a HTML5 video on a web page.

(IMPORTANT: on iPad, you must start with the .mp4 video in the src list.)

On line 5, we have added a download link for older browser who don’t recognize the <video> tag.

<video width="800" height="374">  	
<source src="my_video.mp4" type="video/mp4" />  	
<source src="my_video.ogv" type="video/ogg" />  	
<source src="my_video.webm" type="video/webm" />  	
Video tag not supported. Download the video 
<a href="video.webm"&gthere</a&gt.  

A very important thing to remember is to make sure your server is serving video files with the correct MIME type in the Content-Type header.

To make sure it will, open your site .htaccess file (don’t forget to do a backup before any modification) and add the lines below:

AddType video/ogg .ogv  
AddType video/mp4 .mp4  
AddType video/webm .webm  

Also, various attributes can be used with the <video> element, for example to autoplay the video, loop it, or automatically display some controls. For the full reference, please see the w3 site.

Step 3: How to create a fallback for older browsers

Some older browsers don’t support any HTML video.

For those browsers, the only solution is to use a Flash fallback:

<video width="800" height="374">  	
<source src="my_video.mp4" type="video/mp4" />  	
<source src="my_video.ogv" type="video/ogg" />    	
<object width="800" height="374" type="application/x-shockwave-flash" data="fallback.swf">  		
<param name="movie" value="fallback.swf" />  		
<param name="flashvars" value="autostart=true&amp;file=video.flv" />  	
by Janeth Kent Date: 06-06-2013 html5 web tutorials html tools web design web development hits : 2757  
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.


Related Posts

How to write our own Privacy Policy

In this article we will talk about Privacy Policy statements, how you can write one and implement it on your page. Why did it pop up? These days when we browse on…

Layouts with Bootstrap 4: how to create a responsive web 2

Here we are with the second part of the guide: Layouts With Bootstrap 4   Horizontal alignment   To align the columns horizontally we can use justify-content-value classes, which use the justify-content property of…

Layouts with Bootstrap 4: how to create a responsive web

Responsive or adaptable web design is a design methodology in which the appearance of the web page adapts to the resolution of the device with which it is being viewed,…

A List of Awesome games made with HTML5 and JavaScript

Browsers and JavaScript are becoming more powerful and more comprehensive. There was a time when any type of game needed Flash. But the stage now is set for powerful HTML5…

A roadmap to becoming a web developer in 2019

There are plenty of tutorials online, which won't cost you a cent. If you are sufficiently self-driven and interested, you have no difficulty training yourself. The point to learn coding…

The Meaning of Colors in web Design. A little bit of psychology

Color psychology is one of the most talked about and interesting parts of psychology. The idea that some colors evoke feelings and emotions. In fact, this color helps buy the…

How To Build A Presentation Using HTML, CSS, & JavaScript

The process of conceiving and constructing a presentation is often hard. Sometimes we're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic. Today, we're going to learn how…

Parallax Landscape Scenes Built Entirely With CSS and HTML

Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…

Fullscreen Background Video HTML5 And CSS cross-browser

Full-screen Background Video is a way to present your website playing a video in the background without disturbing its content. It makes your website very modern and different. So, in…

How to Become a Full Stack Developer in 2018

A full stack developer is someone who can work on the development of all layers of an app or program. That means that they are familiar with both the front…

How to make SVG images code responsive

For an image format that features infinite scalability, SVG can be a surprisingly difficult format to make responsive: vector images do not adjust themselves to the size of the viewport…

10 addictive retro video games recreated with HTML5, JS & CSS

Are you a video game player? Are you a child of the "80s"(or even 70s...;-) )? If yes, this post is for you. There was a time when building any type of…

We use our own and third-party cookies to improve our services, compile statistical information and analyze your browsing habits. This allows us to personalize the content we offer and to show you advertisements related to your preferences. By clicking "Accept all" you agree to the storage of cookies on your device to improve website navigation, analyse traffic and assist our marketing activities. You can also select "System Cookies Only" to accept only the cookies required for the website to function, or you can select the cookies you wish to activate by clicking on "settings".

Accept All Only sistem cookies Configuration