Hi, my name is David Carr and I'm a PHP Developer.

Blog Archives Categories Authors About Me Open Source Books Contact Me

Sponsor Me

Help support the blog so that I can continue creating new content!

My Latest Book

Laravel: The Modular way

Learn how to build modular applications with Laravel Find out more

mp4 player made easy with HTML5 Video Player videojs


David Carr

mp4 player made easy with HTML5 Video Player videojs

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'>

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

Copyright © 2009 - 2022 David Carr. All code MIT license. All rights reserved.