DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Cross browser compatible HTML5 videos

Cross browser compatible HTML5 videos

Jean-Baptiste Jung user avatar by
Jean-Baptiste Jung
·
Apr. 05, 13 · Interview
Like (0)
Save
Tweet
Share
6.45K Views

Join the DZone community and get the full member experience.

Join For Free

For years, Flash has been the most popular solution for playing videos on the web. But the HTML5 specification is bringing a new solution, HTML5 videos. In this tutorial, I’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 you’ll have to have multiple versions of the same file in order to serve the right format to the client browser. This is indeed the biggest problem with HTML5 videos right now.

You’ll need the 3 following formats: The first is .mp4 (or .m4v) which is used on Apple products such as iPads, Safari, etc. The second format needed 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. You have nothing to install on your computer, simply upload your video, choose the desired output format, and you’re done!

Now that you have your video in the required formats, let’s start coding. You’ll see, it’s very easy.

Step 2: Coding the player

Below is the basic code for displaying a HTML5 video on a web page. Please note that in order to have the video properly displayed on iPad, you must start with the .mp4 video in the src list.

On line 5, I 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">here</a>.
</video>

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: Creating a fallback for older browsers

Now, you have a super cool HTML5 video player. But the problem is that some older browsers don’t support any HTML video at all. For those browsers, the only solution is to use a Flash fallback.

As the purpose of this tutorial is not to show how to built a Flash video player, I’m assuming that you have your video in the .flv format (named video.flv below) as well as a flash .flv player (named fallback.swf).

As you can see below, I have added my <object> tag inside the <video> tag. That’s simple as that!

<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&file=video.flv" />
	</object>

</video> 




HTML

Published at DZone with permission of Jean-Baptiste Jung, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Key Considerations When Implementing Virtual Kubernetes Clusters
  • Why Every Fintech Company Needs DevOps
  • Top Five Tools for AI-based Test Automation
  • Visual Network Mapping Your K8s Clusters To Assess Performance

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: