How to add HTML5 Video Player in a WordPress Website


Why use HTML5 Video Player?

Html5 video player seems like a better alternative than Flash player. Here is an excerpt from the people who know about the topic:

HTML5 is a set of web standards being developed by the “Web Hypertext Application Technology Working Group”

The HTML5 standard includes many new features for more dynamic web applications and interfaces. One such component being specified and implemented is the <video> element.

Using HTML5 and the <video> tag in concert with a HTML5 Javascript Library, your videos can be played back on the latest mobile devices at native html5 speed, and even on older browsers that require Flash.

 WordPress plugins to add Html5 Video Player

Here are some top WordPress plugins that would help you get  HTML5 Video Player.

MediaElement.js – HTML5 Video & Audio Player

MediaElement.js is an HTML5 video and audio player with Flash fallback and captions. Supports IE, Firefox, Opera, Safari, Chrome and iPhone, iPad.

Video and audio plugin for WordPress built on the MediaElement.js HTML5 media player library. Provides Flash or Silverlight fallback players for non-HTML5 browsers. Supports iPhone, iPad, and Andriod. Supports MP4, OGG, WebM, WMV, MP3, WAV, WMA files as well as captions with WebSRT files.

Visit

JW Player for WordPress

This video plugin is provided by LongTail Video Inc. It enables you to embed Flash and HTML5 video using the JW Player on your WordPress website.

JW Player for WordPress makes it extremely easy to deliver Flash and HTML5 video through your WordPress website. This plugin has been developed by LongTail Video, the creator of the JW Player, and allows for easy customization and embedding of Flash and HTML5 video using the JW Player in your WordPress posts. It provides support for all of the player’s configuration options, including skins, plugins and the LongTail Video AdSolution.

Visit

VideoJS – HTML5 Video Player for WordPress

Video.js is the most widely used HTML5 Video Player available. It allows you to embed video in your post or page using HTML5.

A video plugin for WordPress built on the Video.js HTML5 video player library. Allows you to embed video in your post or page using HTML5 with Flash fallback support for non-HTML5 browsers.

Visit

Secure HTML5 Video Player

Secure HTML5 Video Player allows you to play HTML5 video on modern browsers. Videos can be served privately; pseudo-streamed from a secured directory.

A video plugin for WordPress built on the VideoJS HTML5 video player library. Allows you to embed video in your post or page using HTML5 with Flash fallback support for non-HTML5 browsers. Settings can be easily configured with a control panel and simplified short codes. Video files can be served from a secured private directory.

Visit

Projekktor Video Tag Extension

Adds shortcodes to embed HTML5 video (and audio) with flash-fallback based on the free (GPL) Projekktor player. Also generates a playlist.

This plugins adds easy to learn shortcodes allowing you to embed a HTML5 based audio and video player into your blog posts with ease. The player features:

  • Six premium player themes
  • automatic Flash fallback
  • custom Logo Overlay
  • Youtube support
  • Social features (embedding, post to Twitter and Facebook)

Additionally – if not most important – this plugin collects all videos from your published posts and generates a JSON formatted – Projekktor ready – playlist out of them. This allows you to provide a stunning Hulu-resque webTV video experience without changing the general way you manage your blog content.

Visit

 

Tutorials on adding Html5 Video Player

Here are some tutorials that will help you add Html5 Video player in WordPress and some tuts on adding html5 video player without WordPress plugins.

Shortcode for HTML5 Video Tag in WordPress by c.bavota

Excerpt from the article: HTML5 has made it a lot easier to include certain elements. Especially videos, since you no longer have to embed them with all those parameters. Here’s a short code snippet that will add an HTML5 video shortcode to WordPress

View Tutorial

Adding Videos with the VideoJS HTML5 Video Player by Maverickwebcreations.com

Excerpt from the article: Before you add any videos to the VideoJS HTML5 video player, please enable the MP4, WebM and Ogg videof ormats (MIME types) on WordPress or else some browsers will not play your videos properly.

View Tutorial

How to embed Flash HTML5 Web Video Player to WordPress? by MagicHtml

Excerpt from the article: This tutorial will guide you how to insert Flash HTML5 Web Video Player to WordPress.

View Tutorial

HTML5 Audio and Video: What you Must Know by Bruce Lawson and Remy Sharp at net.Tutsplus

Excerpt from the article: HTML5 provides a competing, open standard for delivery of multimedia on the Web with its native video and audio elements and APIs. This article largely discusses the <video> element, as that’s sexier, but most of the markup and scripting are applicable for both types of media.

View Tutorial

Q&A troubleshoot questions

If you are having issues with HTML5 Video Player, Feel free to ask on Ask Forum

This Post Has 2 Comments

  1. Robert says:

    Your WordPress plugins to add Html5 Video Player method is very useful..so added in my website..Thanks for Sharing….

  2. Bnimbhal says:

    Hi,

    How to embed wma file on the WP post and page, I am getting error “Max file size” when i am uploading the file via add media.

    Plz help
    Thanks

Leave A Reply