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

Fathom Analytics $10 discount on your first invoice using this link

David Carr - Laravel Developer

Hi, I’m David Carr

A Senior Developer at Vivedia
I love to use the TALL stack (Tailwind CSS, Alpine.js, Laravel, and Laravel Livewire)

I enjoy writing tutorials and working on Open Source packages.

I also write books. I'm writing a new book Laravel Testing Cookbook, This book focuses on testing coving both PestPHP and PHPUnit.

Sponsor me on GitHub

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Laravel Testing Cookbook

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

Fathom Analytics $10 discount on your first invoice using this link

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2006 - 2023 DC Blog. All code MIT license. All rights reserved.