mp4 player made easy with HTML5 Video Player videojs

David Carr

Tools

I've recently come across a HTML 5 video player, primarily its run using HTML 5 with flash fallback support which means the HTML5 will be used on any supported browser/device which is all modern browsers.

Unsupported browsers will use a flash version instead. The player is very simply to use and works well on mobile devices too (note I've only tried it on an iPhone)

Setup is very minimal there's 2 files needed a css file for the style of the player and a js file to run the player these can be run from a CDN or if you want to host the files you can do in which case you would need the swf file as well.

In the header of the page place the following files:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

Then using an HTML 5 video tag embed the player:

<video id="my_video_1" class="video-js vjs-default-skin" controls  preload="auto" width="490" height="290" poster="splash.jpg" data-setup="{}">
    <source src="video.mp4" type='video/mp4'>
</video>

That's all there is to it! simple or what to adjust the dimensions of the player change the width and height attributes.

Check out the HTML 5 Video website for more information http://videojs.com also have a look at their Documentation

Read articles directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Copyright © 2006 - 2024 DC Blog - All rights reserved.