Category Archives: Audio Video and Other Media

Boost Your Mobile Traffic with 10 Ready-to-use Open Source HTML5 Video Players

With the developing of HTML5, there will be a dramatic change for online media content delivery. This industry has been dominated by the proprietary Adobe Flash Player for many years. But now, HTML5 is here and the <video> element is a long-awaited and probably one of the most talked about feature. We can easily embed videos into web pages using the <video> element without any plug-ins.

In this post, I am sharing 10 ready-to-use HTML5 video players to help web designer and developers to boost their Mobile traffic. All these are open source players available for free download.

1. OSM Player

OSM Player

Built by Alethia Inc., the Open Standard Media (OSM) Player is a free all-in-one media player for the web. It is an open source (GPLv3) media player that is written in the popular jQuery framework to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash. It supports audio and video with the most popular media formats. OSM Player could easily use the incredible ThemeRoller system. It also supports playlist and player to player communication.

Performance comparison: supports automatic Flash fallback for non-standard media and videos can be displayed in full-screen.

Recommendation Index: ★★☆☆☆

2.   KalturaHTML5

2.	KalturaHTML5

Kaltura’s HTML5 Media Library enables you to take advantage of the html5 video and audio tags. It has a consistent player interface across all major browsers including Internet Explorer. Upon detection of the client browser, the Kaltura HTML5 Media Library chooses the right codec to use and the right player to display. Based on HTML, CSS and jQuery, its skinning is amazingly easy and flexible. It integrates to any existing web CMS and is pre-integrated into Media Wiki. Kaltura’s HTML5 Media Library is built on jQuery, so it’s easy to theme, customize and extend.

Performance comparison: supports a seamless fallback with Flash based playback, supports emerging subtitles and timed text formats, supports free screen and IOS.

Recommendation Index: ★★★★☆

3.   Projekktor

3.	Projekktor

Projekktor is a free, Open Source (GPL) HTML5 based video player written in pure JavaScript. It solves cross browser and compatibility issues, adds eye candy and provides extremely powerful non standard features. Its control panel can be customized and themed by editing a single CSS file. Projekktor supports PRE roll and POST roll content for ads and its server is independent seeking for Theora. It is also built on jQuery and supports playlists.

Performance comparison: can display videos in full-screen, supports IOS platform and flash fallback.

Recommendation Index: ★★★☆☆

4.   Video JS

VideoJS is a free, open source and lightweight HTML5 Video Player with three core parts, including an embed code (Video for Everybody), a JavaScript library (video.js), and a pure HTML/CSS skin (video-js.css). The JavaScript library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions. It also ensures a consistent look between HTML5 browsers and easy custom skinning if you want to give it a specific look, or brand it with your own colors. VideoJS is an easy to use HTML5 video player with volume control and stand alone JavaScript library

Performance comparison: has forced fallback to flash, supports emerging subtitles, plays with free screen player UI and compatible with IOS platform.

Recommendation Index: ★★★★☆

5.   OIPlayer

5.     OIPlayer

OIPlayer is a HTML5 audio and video player with fallback to Flowplayer (mp4, h.264) or Cortado. OIPlayer attaches itself to all video and audio tags it encounters. Besides the general configuration of the jQuery plug-in itself, it uses the respective tag like poster, width, controls, auto play etc. it has multiple different players on a page and supports mute and unmute. OIPlayer can easily play with CSS and has fires events of ‘oiplayerplay’ and ‘oiplayerended’ to use for play statistics.

Performance comparison: compatible with iOS, iPhone, iPad etc, supports video display in full screen.

Recommendation Index: ★★☆☆☆ 

6.    JMediaelement

6. JMediaelement

The jMediaelement is a multimedia framework for JavaScript based on jQuery. With it, you can embed multimedia-content in a clean and lean way (HTML5 audio/video specification is the base here), and you are able to script multimedia in an unobtrusive, intuitive, “jQuerish” way. You can use semantic and accessible markup to add custom control elements. Since jMediaelement Supports HTML 5 Video and Audio elements and degrades gracefully to Flash (JW Player) or VLC, it can support nearly every browser on every device.

Performance comparison: supports player UI features of full screen, keyboard interface and subtitle adding, supports embed type of Flash fallback.

Recommendation Index: ★★★★☆

7.    Mooplay

7. Mooplay

MooPlay brings JavaScript controls over an html5 video element. You can build and customize your own player with a play and a pause control. MooPlay has buttons to move inside the video, an interactive play progress slider, a load progress bar and a volume slider and a mute button. It supports the JavaScript library of Mootools. The supported formats are SubRip (.srt) and SubViewer (.sub). It shows the current and remaining time of the playing video. What’s more, the video element methods can be called by other scripts, and MooPlay objects will adapt themselves to any state changes.

Performance comparison: loads subtitles through an Ajax request that synchronized with the video, supports fallback video display.

Recommendation Index: ★★☆☆☆

8. Mediaelement.js

MediaElement.js is an HTML5 video and audio player. It supports iPad, iPod, iPhone, IE6, IE7, IE8, Firefox, Opera, Safari, Google Chrome and Android. It is a complete audio and video player upgraded with custom Flash and Silverlight plug-ins that mimic the HTML5 MediaElement API. MediaElement.js is a jQuery plug-in which enables you to use the <video> tag with one H.264 file. If the player doesn’t support it, the plug-in replaces the player with a Flash or Silverlight-powered one.

Performance comparison: supports flash fallback, supports subtitles, timed text and IOS, video can be displayed with full screen.

Recommendation Index: ★★★★☆

9.    Html5media

9. Html5media

Html5media enables <video> and <audio> tags in all major browsers. The html5media project makes embedding video or audio as easy as it was meant to be. It’s a fire-and-forget solution, and doesn’t require installing any files on your server. Unlike many other HTML5 video players, it allows people to use the video controls supplied by their own web browser. It’s one of the smallest, fastest solutions available, and as browser technology improves it will become even faster. The html5media project is open source and can be found on GitHub.

Performance comparison: supports Flash fallback and full screen.

Recommendation Index: ★★☆☆☆

10.  JPlayer

jPlayer is completely free and open source media library written in JavaScript. With a jQuery plug-in, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community. jPlayer allows you to play and control media files in your webpage. You can create and style a media player using just HTML and CSS, and add audio and video to your jQuery projects.

Performance comparison: supports older browsers using a flash fallback, supports platform of iOS and video’s full screen displaying.

Share

20 Online HTML 5 Video Players

 
The <video> element is really a long-awaited and in all likelihood one of the most talked about function within HTML5.
We can easily embed videos into webpages with no plugins, using the <video> component (which is right now contained in latest variations associated with Firefox, Safari & Chrome & Opera). The major problem is that not all the surfers support exactly the same codecs (while Ie does not assistance any kind of). This is when javascript comes to help. It sits along with the actual <video> tag supplying better movie regulates along with a fallback in order to flash with regard to old surfers.
Listed here are twenty useful HTML5 movie gamers that allow you to easily embed movie in to web pages and ensure in reverse match ups.

This is a MooTools custom controls library for the HTML 5 video element. It features: playlist and subtitles support, settings panel for enabling or disabling various options such as looping, captions and auto-hiding of controls bar.

SUblimeVideo is an HTML5 video player that will allow you to easily embed videos in any page, blog or site using the latest modern web standards.

FlareVideo is an open source, jQuery-powered HTML5 video player. The player supports fullscreen mode and has a fallback mechanism into a Flash-driven player.

Video JS is a javascript-based video player that uses the HTML5 video functionality built into advanced browsers. In general, the benefit of using an HTML5 player is a consistent look between browsers.

Projekktor is a free JS wrapper for the new HTML5 video and audio elements. It solves cross browser and compatibility issues, adds some eye candy to the native players and provides powerful non standard features.

Kaltura has developed a full HTML5 Video Library – in use by Wikipedia – that works in ALL major browsers, even IE. The library supports a seamless fallback with Flash based playback (using Kaltura’s media player – KDP3) or Java Cortado for browsers that don’t yet feature HTML5 video & audio support.

OIPlayer is a HTML5 audio and video player with fallback to Java and Flash. OIPlayer ‘attaches’ itself to all video and/or audio tags it encounters. Besides the general configuration of the plugin itself, it uses for each individual tag the attributes the respective tag has like poster, width, controls, autoplay etc.

jme is an HTML5 audio / video development kit with Flash and VLC Fallback, which focuses on flexibility, intuitive DOM-API and semantic code.

Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 <video> element, falling back to Flash automatically, without the use of JavaScript or browser-sniffing.

Akamai has released a new Open Video Player for HTML5 <video> developer toolkit, aimed at simplifying the task of creating flexible HTML5-based video player applications for delivery of HTTP content.

This HTML5 video player is fairly straight forward and offers all of the basic controls you’d expect a video player to have. The player controls are visible when the video is paused or when the user’s cursor is over the video.
Compatibility: Chrome, Firefox, Opera, Safari

The JW Player for HTML5 is a fully skinnable and configurable player based on the new <video> tag found in HTML5. It is built using javascript (jQuery) and enables a seamless fallback to the popular JW Player for Flash.

The Open Standard Media (OSM) Player is an all-in-one media player for the web. It is an industry changing, open source (GPLv3) media player that is written in jQuery to dynamically deliver any type of web media, including HTML5, YouTube, Vimeo, and Flash.

YUI HTML5 Player is a YUI 3 widget that creates a video player using the HTML5 video tag and JavaScript that is based on YUI 3. It was started as entry to the YUI 3 Gallery Contest in March 2010.

The html5media project consists of a single, minified Javascript file that is used to detect your browser’s HTML5 video capabilities. Any video tags that cannot be played are dynamically replaced with a Flash video player.

Developed by Rasmus Andersson, lead creative & designer at Spotify. Psd sources are available for the progress bar and icons, so you can customize the player to your needs.

The jQuery UI Video widget enhances your HTML5 <video>

This is a tutorial on building an HTML5 video player in Javascript. It’s meant to give you a basic understanding of the different options you have with the new video tag in HTML5, and the javascript needed to create some of the typical video controls you’d find in other players.

In this article we’ll explore building a interactive set of controls using a JavaScript UI library (Glow), for playing a video file. It could easily be adapted to jQuery UI or similar.

A toolkit to use and control HTML5-video with the current mootools release – and two extensions of Fx.Slider: A video timeline and a volume slider.

Incoming search terms:

  • html5 movies online
  • 20OnlineHTML5VideoPlayers|HTML5Samples TutorialsandNews
Share

Another way to create HTML5 Video player

A presentation by Jim Jeffers shows how to create a HTML5 video player

Share

How to use Cross-browser HTML 5 audio

HTML5, the next generation of the web mark-up language, is a wonderful thing. It’s a true step forward to mak browsers more powerful and easy to use. From now on I will launch a major website completely in HTML5. Working on that, I foudn out some interesting features of the audio tag.

html5 Internet Explorer

html5 Internet Explorer

The new audio capabilities of HTML5 are a godsend. It means not having to embed a flash player anymore, since the browser can play audio natively. Well ….. not quite. Not all browsers can play all media types. Unfortunately browser makers are involved in a policial discussion, which severely limits our options.

This means workarounds for something that can be so beautiful. Anyway, the benefits outweigh the drawbacks for me, so here’s my quick guide on how to embed audio in HTML5.

<audio src="mysong.mp3" controls></audio>

This is all you need. Or rather, all you should need. Firefox does not play MP3, so you will need an OGG file if you want audio in that browser. This is where the source element comes in:

<audio controls><source src="mysong.ogg"><source src="mysong.mp3"></audio>

Works rather well, provided you start with the OGG first because of a Firefox bug. But what happens when you only have an MP3?

Firefox will show the player, but will be unable to play. Your users are stuck with a broken page. Apparently, this is intentional. Well in my opinion that sucks donkey balls. If you can’t play the media, don’t show the controls! So in order to resolve this I had to implement a workaround. Since my fallback option (visible for IE users) is to render a simple link, this is what works for me, when I embed just an MP3 audio file without OGG variant:

/* If the browser does not support MP3, remove the audio tags completely.
   needed for firefox  */
if (document.createElement('audio').canPlayType) {
	if (!document.createElement('audio').canPlayType('audio/mpeg')) {
		$('audio').each(function() {
			$(this).after($(this).find('a'));
			$(this).remove();
		})
	}
}

(preferably inside your jQuery document ready event) It removes the audio element completely and inserts the fallback content into the page. Works like a charm.

Incoming search terms:

  • cross browser audio player
  • html5 audio cross browser
Share

Convert media into Theora format using VLC Media Player – GUI

Download and install VLC Media Player from http://www.videolan.org/vlc/
Open VLC Media Player. From the Menu, Select Media -> Convert / Save…

VLC Media Player to convert theora for HTML 5

VLC Media Player

On the Open Media window, Click Add to select the media that you want to convert. If it has external subtitle (a movie for example), you can click on Browse to select subtitle file for the media. Finally click on Convert / Save

Select File and subtitle before converting to Theora format -  HTML 5 video and audio

Select File and subtitle before converting to Theora format

On the Convert window, Enter or Browse the Destination file (output file) and select suitable profile. In this case we choose Video – Theora + Vorbis (OGG). If you want to customize the quality of the output file, select the setting icon next to the dropbox. You will then be able to modify the quality of video and audio output.

Select Output settings and Theora codec for HTML 5 video and audio

Output settings and Theora codec

Modify Video and Audio quality for Theora format for HTML 5 video and audio

Video and Audio quality for Theora format

Share

Controlling audio, video tag playback using Javascript

Once you’ve embedded media into your HTML document using the new elements, you can programmatically control them from your JavaScript code.  For example, to start (or restart) playback, you can do this

<video src="video_test.ogg" autoplay></video> <script> function playVideo() { var V = document.getElementsByTagName('video')
  if (V.paused)
    V.play();
  else
    V.pause();
}
</script>
<input type=button onclick="playVideo()" value="Play or Pause"/>

You can also add events into the script:

V.addEventListener('ended', function () {
  alert('Video ended')
} );

Those events can be sent when handling media:

Event name Description
abort Sent when playback is aborted; for example, if the media is playing and is restarted from the beginning, this event is sent.
canplay Sent when enough data is available that the media can be played, at least for a couple of frames.  This corresponds to the CAN_PLAY readyState.
canplaythrough Sent when the ready state changes to CAN_PLAY_THROUGH, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level.
canshowcurrentframe The current frame has loaded and can be presented.  This corresponds to the CAN_SHOW_CURRENT_FRAME readyState.
dataunavailable Sent when the ready state changes to DATA_UNAVAILABLE.
durationchange The metadata has loaded or changed, indicating a change in duration of the media.  This is sent, for example, when the media has loaded enough that the duration is known.
emptied The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
empty Sent when an error occurs and the media is empty.
ended Sent when playback completes.
error Sent when an error occurs.  The element’s error attribute contains more information.
loadedfirstframe The first frame of the media has finished loading.
loadedmetadata The media’s metadata has finished loading; all attributes now contain as much useful information as they’re going to.
loadstart Sent when loading of the media begins.
pause Sent when playback is paused.
play Sent when playback starts or resumes.
progress Sent periodically to inform interested parties of progress downloading the media. The progress event has three attributes:

lengthComputable
true if the total size of the media file is known, otherwise false.
loaded
The number of bytes of the media file that have been received so far.
total
The total number of bytes in the media file.
ratechange Sent when the playback speed changes.
seeked Sent when a seek operation completes.
seeking Sent when a seek operation begins.
suspend Requires Gecko 1.9.2 Sent when loading of the media is suspended; this may happen either because the download has completed or because it has been paused for any other reason.
timeupdate The time indicated by the element’s currentTime attribute has changed.
volumechange Sent when the audio volume changes (both when the volume is set and when the muted attribute is changed).
waiting Sent when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).

Incoming search terms:

  • javascript audio seek
  • html5 video tags autoplay delay
  • video tag javascript
  • javascript video tag
  • html5 audio seek
  • audio tag html5 volume
  • Javascript HTML5 video bytes loaded and total
Share

Simple audio, video and Flash uses in HTML 5

Many web browsers introduced support for the HTML 5 audio and video elements, providing the easy way to add media into HTML pages.  At the moment, Ogg Theora or Theora, Ogg Vorbis or Vorbis, and WAV format media is supported.

Vorbis is an audio format specification and codec for lossy audio compression. Vorbis is free and mostly used in conjunction with the Ogg format and it is therefore often known as Ogg Vorbis.
Filename extension: .ogg .oga
Internet media type: audio/ogg, audio/vorbis, audio/vorbis-config

Theora is a free and open lossy video compression codec. It includes the Vorbis audio codec and the Ogg container.
Filename extension: .ogv
Internet media type: video/ogg

Adding Media with HTML 5

Adding media in your HTML document is very easy. This example plays a Ogg video from HTML5Samples website.

<video src="http://html5samples.com/Files/video_test.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>

Multiple source files can be given using the source element in order to provide video/audio encoded in different formats for different browsers. For example:

<video controls>
  <source src="video_test.ogg" type="video/ogg">
  <source src="video_test.mp4">
  Your browser does not support the <code>video</code> element.
</video>

will by play the Ogg video file in browsers supporting the Ogg format. If the browser couldnt play Ogg file, it should try to use the MPEG-4 file.

You also can define which codecs the media file must uses; this example lets the browser to make even more smart decisions:

<video controls>
  <source src="video_test.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;">
  Your browser does not support the <code>video</code> element.
</video>

Here, we define that the video must uses the Dirac and Speex codecs. If the browser only supports Ogg, but not Dirac and Speex codecs, the video will not be loaded.

If type isn’t specified, the media’s type is retrieved from the server and checked to see if Gecko can handle it; if it can’t be rendered, the next source is checked.  If none of the specified source elements can be used, an error event is dispatched to the video element.  If type is specified, it’s compared against the types Gecko can play, and if it’s not recognized, the server doesn’t even get queried; instead, the next source is checked at once.

Using Flash

You could use object element to play a Flash format movie if the HTML 5 video element doesn’t work:

<video src="video_test.ogv" controls>
    <object data="video_test.swf" type="application/x-shockwave-flash">
      <param value="video_test.swf" name="movie"/>
    </object>
</video>

You shouldn’t embed classid in the object tag if you want it to be compatible with browsers other than Internet Explorer.

Share
10 visitors online now
3 guests, 7 bots, 0 members
Max visitors today: 16 at 01:56 am UTC
This month: 74 at 04-21-2017 07:18 pm UTC
This year: 74 at 04-21-2017 07:18 pm UTC
All time: 513 at 06-01-2016 02:24 pm UTC
Get Adobe Flash player