HTML5 Video

HTML5 video is becoming the new standard way to show video on the web without plugins, instead of the previous de facto standard. The proprietary Adobe Flash plugin recently released security updates for Adobe Flash Player for Windows, Macintosh, Linux and Chrome OS. These updates address a critical vulnerability that … Really? Again? Yes. Flash is still with us, but hopefully not too much longer. In the meantime the world is moving to HTML5. If you’re still using flash, it’s wise to update it often. It has been a favorite security hole for hackers for some time.

Why should a videographer learn HTML5? The reason is that HTML5 lets you put an MPEG4 or other type video on a web page. Here’s an example of the code with explanations.

HTML5 video

The control attribute adds video controls, like play, pause, and volume. In fact there are a lot of great customizable players for showing video on an HTML5 page. The code above also includes width and height attributes. If height and width are not set, the page might flicker while the video loads. In this case the video is hosted on the same server as the web page that displays this code.

Theelement allows you to specify the name and location of the video. You can also list alternative video files here which the browser may choose from. The browser will use the first recognized format. In this case there is only one.

The text between the video tags will only be displayed in browsers that do not support the video element.

Even if you know nothing about HTML code, you have to admit that was pretty easy to follow.

YouTube has been using HTML5 to stream video for some time now. YouTube engineer Richard Leider said the time had come to ditch the aging Flash in favor of HTML5. He pointed out that HTML5 is used in smart TVs and other streaming devices, and had benefits that “extend beyond web browsers.”

You can learn how to build Web sites using HTML5 and basic CSS, directly from W3C, creator of the latest Web standards. You can read more and play with the code on this page. You may want to take the entire HTML5 Tutorial from W3C. It’s free unless you want to get a certificate. Being able to build a web page or a complete website could be very valuable to your clients.

HTML5 Video Players

You don’t really need a player as the default player used in the code above works just fine.
But the new players look great and have more capabilities.

These HTML5 video players allow you to customize how the player looks and acts across a wide variety of browsers. You can install one of these HTML5 players on any web page. The video can be hosted anywhere without Flash or other third-party plug-ins.

Among the many HTML5 video players, one of the most popular is the Video.js Player also called HTML5 Video Player (http://www.videojs.com. ) It’s a free WordPress plugin which allows you to embed any HTML5
video on a web page. It has a preload option which means the video loads in the
background, so when a visitor clicks, the playback starts immediately. The player has a
customizable skin that you can choose or create at (designer.videojs.com ). You can
add and change controls, color and size to make the player match your site design. It
has many additional options such as captions and subtitles support, and video
chapters.

Media Fragments

By adding code to the video URL, you can specify the exact portion you want to play. To add a media fragment, you simply add #t=[start_time][,end_time] to the media URL. This enables you to play, for example, only the video between seconds 10 through 20.

Captions and Subtitles

Theelement provides a simple way to add subtitles, captions, screen reader descriptions and chapters to your video, which helps the viewer, but also makes it possible for search engines to understand what’s in the video. This is a vital part of video search engine optimization or SEO.

Interactive Video Without Flash

For the longest time, Flash was the only way to create interactive video. Today there are a growing number of options. The open source FrameTrail allows you to experience, manage and edit interactive video directly in your web browser. It can include hyperlinked film contents, or additional media documents like text overlays, or images.

Another open source tool called Odysseyallows you to combine maps, narratives, and other multimedia into a beautiful story. You enhance the narrative and multimedia of your stories using Actions (e.g. map movements, video and sound control, or the display or new content) that will let you tell your story in an interactive manner.

HTML5 video is the ideal way to embed video into a webpage and control it in ways not thought possible without Adobe Flash.


Keep Reading...

GoPro Goes Public

More Than A Camera This company, which makes the camera we videographers love, just made the largest initial public offering of a consumer electronics company in more than 20 years! On the first day of trading the new stock (GPRO) jumped up more than 30%. The only other consumer electronic company to go public was […]

Read More
HAL write here

Go Pro Karma Recall

On Tuesday November 8, 2016 GoPro issued a Go Pro Karma Recall and yanked its new Karma drone from retailers shelves because some of them lost power during flight. What caused the power loss has not been announced. The HERO5 Black and Karma Grip are not subject to recall. However, if you purchased the Karma […]

Read More
Atomos Ninja 2 Captures Pro Res for Less than $300

Atomos Ninja 2 Captures Pro Res/DNxHR for under $300

Atomos Ninja 2 Captures Pro Res/DNxHR for under $300 First Pro-Res/DNxHR monitor-recorder under $300 The new Ninja 2 from Atomos captures Apple ProRes and AVID DNxHD recording from HDMI cameras for less than $300. The monitor-recorder allows any HD camera to record to a pro format. It avoids the internal MPEG compression. Your output goes […]

Read More

Incredible Movi Stabilizer, Game Changer?

The MōVI M10 is produced by Freefly Systems of Seattle WA. The device is a digital, 3-axis, gyro-stabilized camera gimbal.

Read More


Facebook Comments

Leave a Reply

Your email address will not be published. Required fields are marked *


  • Forbes Magazine calls VideoUniversity one of the best business-to-business sites for digital video production.
  • WINNER
    Videography Magazine's
    "Website of the Month" Award
  • WINNER
    PC Magazine Online "Best Desktop Video Site" Award
  • WINNER
    CyberFilm School's "FOUR STAR" Award