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 : 3804  
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 AND DEVELOPMENT.


Related Posts

Let's create a Color Picker from scratch with HTML5 Canvas, Javascript and CSS3

HTML5 Canvas is a technology that allows developers to generate real-time graphics and animations using JavaScript. It provides a blank canvas on which graphical elements, such as lines, shapes, images…

Loading images by resolution with HTML5

Normally the way to load images in HTML is through the img element to which we pass as a parameter the URL of the image to load. But since HTML5…

How to make your own custom cursor for your website

When I started browsing different and original websites to learn from them, one of the first things that caught my attention was that some of them had their own cursors,…

Open source web design tools alternatives

There are many prototyping tools, user interface design tools or vector graphics applications. But most of them are paid or closed source. So here I will show you several open…

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…