Archive results for:

HTML5 Video Playlist Player

Nowadays, there are many HTML5 video players that also support legacy browsers.

One of the more popular video players is jwplayer, which both offers free and commercial versions.  It has tons of features and a great API with detailed documentation.

You can easily modify the default initialization code for a single video player, to add playlist functionality.

Read more ›

Learning HTML5 Video Class

html5_videoA self-study class ($25) enabling students to learn at their own pace includes four lessons teaching the student how to implement HTML5 Video in various ways such as static embedding, dynamic with JavaScript, implementing a custom player and making video responsive. Each lesson will cover a different aspect of how HTML5 Video can be implemented in a web site.

This class will teach students how to incorporate the latest HTML5 Video standards to not only display video and create custom interfaces on the web, but also how to integrate and convert video to work with latest Responsive Design layouts. Read more ›

Video Playback

To learn more about HTML5 Video, you can take the HTML5 Video class

Not a day passes without us being told that video (and we’re not just talking about YouTube) is the future of the Web. If that is to be the case, particularly for the average user, we surely need an easy, reliable way of including video content without having to invest in expensive proprietary software.

HTML5 Video provides just that, directly in the browser with (at its minimum) a single line of markup.

Let’s take a look at how we’ve been adding video to our sites using the object tag in recent years. We’re sure you’ll all recognize YouTube’s embed code.

Pretty ugly, huh? Well, as you’ve probably already guessed, HTML5 not only helps us to be a little more semantic, but also makes adding video to our sites as easy as ABC (OK, almost as easy). The basic markup you need is:

By default, the browser doesn’t show any play controls; the user needs to open a context menu (right click or cmd+click) to play the video using this markup, which is not very intuitive. You’ll also see a small glitch when loading the page if you don’t explicitly set the width and height of the video while the browser calculates the dimensions. Also, the user doesn’t get a sneak peek of what they’re going to be watching. To remedy the situation, we’ll add the poster and controls attributes along with the dimensions.

The standard global attributes, along with poster and controls, aren’t the only attributes available, though.

The standard global attributes defined in HTML5 are:

  • autoplay: Tells the browser to start playing the video as soon as it is downloaded.
  • controls: Displays built-in controls that are native to the browser. Basic controls tend to include a play/pause button, time counter, volume control, and time scrubber.
  • crossorigin: Either allows or prohibits the sharing of a video across other domains.
  • height: Identifies the height of the video (if your height/width aren’t in the correct ratio, you will see black banding above and below the video; it will not distort).
  • loop: Tells the browser to loop the video after playback has been completed.
  • mediagroup: Allows multiple media elements to be linked together by creating a media controller. Therefore you can synchronize multiple videos or a video with audio.
  • muted: Allows the author to specify if the video should be muted when it begins to play.
  • poster: Identifies the location of a still image to use as a holding frame.
  • preload: Allows the author to inform the browser to start (or not start) downloading the video as soon as the page is loaded. preload has replaced the autobuffer attribute. The autoplay attribute can override the preload attribute if present.

  • src: Identifies the location of the video file.
  • width: Identifies the width of the video (if your height/width aren’t in the correct ratio, you will see black banding above and below the video; it will not distort).


Video Containers and Codecs

The file extensions .mp4, .avi, and .flv that we associate with video aren’t codecs themselves, but rather a container format. These containers tend to include multiple tracks, generally at least one for the video and one for the audio. The tracks are synchronized by markers contained in the audio track. There can be multiple audio tracks for different languages or tracks for subtitles. Containers can also have associated metadata that might include the title of the video or chapter points.

  • WebM: Based on the Matroska container format, it is designed to be used with the open source VP8 video codec and Vorbis audio codec. YouTube supports the WebM format making sure you  are using a compatible browser. Mozilla Firefox and Chrome play .webm.
  • Ogg: An open standard container format without any patent restrictions, it is maintained by the Xiph.Org Foundation. Ogg’s video codec is called Theora and the audio equivalent is Vorbis. Mozilla Firefox, Chrome, and Opera play .ogv.
  • MPEG-4: Based on Apple’s QuickTime container format MOV. It is associated with the file extensions .mp4 and .m4v. The downside to MPEG 4 is that it is patent encumbered, which may mean the user will have to pay royalties starting in 2016. MPEG 4 uses the H.264 video codec. Safari, Chrome and IE 9/10 play .mp4.

Adding video source

source allows us to specify multiple alternative videos for our media elementst. It is an invisible element, which means that nothing is rendered by the browser to indicate its presence visually in the document.

If you don’t add the type attribute to the source element, the browser will download a small part of each file before realizing the codec is unsupported. Therefore, you should ensure that the type attribute is always included for each video source.

The browser will play the first video that is in a format it understands. If a browser doesn’t understand the type of video, it will simply skip to the next source element until it finds one it does understand.

The order of the source elements is equally important: MP4 must come first because on older iPads it only looks at the first source element (now resolved). WebM is placed second due to that fact that its quality is higher than that of Ogg, thus ensuring Opera 10.6+ and Firefox 4+ will play the WebM file rather than the Ogg; Ogg is placed third to support Opera 10.5 and Firefox 3.5/3.6.

As time passes (or perhaps even now if you’re so inclined), it’s likely we won’t have to encode our videos with Ogg, as newer versions of browsers that currently use it will also support the higher-quality WebM.

Enter our old friend Flash

In this instance our trusty old friend Mr. Flash helps us to support older versions of Internet Explorer (IE 8 and older). There are a number of Flash video players available, so which one you use is up to you. This example uses the non-commercial version of JW Player . The default code that it provides after linking the script follows:

By combining the Flash object with our earlier example, we end up with an accessible, cross-browser, native solution.

Reference: State of HTML5 Video

JavaScript API and Custom Controls

HTML5 video provide a lot of functionality out of the box, but it doesn’t stop there. HTML5 also provides a wonderfully easy-to-use Media JavaScript API that you can use to extend that basic functionality in other ways. Aan excellent use of the JavaScript API is to roll out your own multimedia controls. You can style them however you like using CSS, and then hook them up via the API to control your video.

Here is a list (.pdf) of the attributes and events of each multimedia element of the API.

There’ll come a time when you’ll need to do more with your video, whether it’s creating custom controls that are on brand or adding fast forward and rewind buttons.

We’ll add custom play and pause buttons as well as a seek for forwarding and sound slider our video.

Firstly, we need to reference our <video> element:

Then our custom buttons:

The Play button will toggle to Pause when clicked:

We will have a button to mute the sound:

Then we need code to reference the current time duration of the video:

Then, we can add a button for showing the video fullscreen:

Here is an example of the demo.