Nowadays, third-party HTML5 players use javascript to create and modify HTML video elements and controls for advanced looks and features. This javascript is mainly provided as a CDN-hosted JS file with the iframe URL of the video or audio file. This is not only done to add features but majorly to make the appearance and functionality of the player consistent for all browsers. Otherwise, the default looks and functionalities of playback vary across browsers.

Introduction to HTML5 Video Streaming

HTML5 markup language was first introduced to the public on 22 January 2008. It was the fifth and final major HTML version update as per World Wide Web Consortium(W3C) recommendation. This markup is used to structure and define rules for displaying content on the Internet as web pages. It is currently maintained by a consortium of major browser vendors like Apple, Google, Mozilla, and Microsoft called Web Hypertext Application Technology Working Group (WHATWG). The main goals of the HTML5 update were to support HTML5 video streaming through HTML video controls and elements, easy readability and backward compatibility.

It lets the web browsers and parsers consistently understand the defined markup, thus allowing better readability for humans and software. HTML5 processing models are more capable of extending the use of markup and also allows the use of APIs for complex web applications. The cross-platform infrastructure allows low-end devices and browsers to perform smoothly for enhanced user experience.

To add support for HTML5 video streaming, many new HTML multimedia elements like < video >, < audio > and < canvas > were introduced. They were introduced with additional features like that of Javascript API to add more interactivity and control over the HTML elements and handle. This makes the HTML5 streaming package more powerful and ubiquitous than flash players. You can make customizations to the video or audio stream, change the playback appearance, and even apply mathematical rules for computation. Apart from streaming, HTML5 also focused on semantics and introduced elements like <section>, <header>, <footer>, <article>, <aside>, <nav>, and <figure> for basic web page structuring and SEO.

What is an HTML Video Element?

< video > element was added to add support for HTML5 video streaming in all browsers supporting HTML in 2008. It was introduced with additional features like that of Javascript API to add more interactivity and control over the HTML elements and handle. The use and classification of the attributes have been discussed later, but here is the basic anatomy of a < video > tag syntactically,

< video src=”video.webm” type=”video/webm” controls >

< /video >

Or

< video controls >

< source src=”movie.mp4″ type=”video/mp4″ >

< source src=”movie.ogg” type=”video/ogg” >

< /video >

Note: < source > tag is an empty tag. There is no need to close it except in the case of XHTML.

Video Element Optional HTML Attributes

An < video > element contains the following attributes that are frequently used. Other event-based and global attributes have also been discussed with their use.

Video Element compatible Global Media Events HTML Attributes

The < video > tag also supports Global HTML Attributes and Events attributes triggered by media like videos, images, and audio. The following Media Events attributes apply to all HTML elements but are most commonly used with media elements, like <audio>, <embed>, <img>, <object>, and <video>. These event-based attributes trigger a javascript attached with the specific attributes, and a javascript’s next styling, calculation, etc steps get performed. That is why the value these attributes require is a script.

What are HTML Video Controls?

We discussed the attributes of < video > element and here we will discuss basic controls as well as controls for customizations we want to place over the defaults of the player.

Basic Controls

Basic controls get initiated by using the controls attributes within the video tag. It is a boolean attribute and specifies the display of video controls like play,pause,seek, etc as symbols over the video player. It displays the following controls as per their availability.

• Play
• Pause
• Seek
• Fullscreen toggle
• Volume
• Alternate Audio Track (when available)
• Captions/Subtitles (when available)

Custom Controls

Custom controls are added via event based or optional attributes with the support of javascript. You can even make complex HTML handlers to initiate a calculated action of play, seek, etc by combining functions of various methods and arrange them in logic to form a complex function. Custom controls are also necessary to provide homogeneity across browsers via javascript. Here is a basic example of creating custom controls via HTML and Javascript API.

// Adding Video Tag with multiple source

<video id = "myVideoObject">

<source src = "1920x1080.mp4">

</video>

 

// Adding the HTML buttons with ID

<button id = "playButton"> Play </button>

<button id = "pauseButton"> Pause </button>

 

// Adding the JavaScript to identify HTML elements

var myVideoObject = document.getElementById ("myVideoObject");

var playBtn = document.getElementById ("playButton");

var pauseBtn = document.getElementById ("pauseButton");

 

playButton.onclick = function () {

myVideoObject.play ();

}

 

pauseButton.onclick = function () {

myVideoObject.pause ();

}

Need of HTML Video Elements and Controls

Earlier, if you were to copy the video playback code of a video from YouTube, it used to be a < object > tag and used to look like this,

<object width="720" height="480">

<param name="movie" value="https://www.youtube.com/v/8FHI1AUFJKk&hl=en_GB&fs=1&"></param>

<param name="allowFullScreen" value="true"></param>

<param name="allowscriptaccess" value="always"></param>

<embed src="https://www.youtube.com/v/8FHI1AUFJKk&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>

</object>

It was a generic container for foreign objects like Flash movies. Browsers were more compatible with the < embed > tag to handle inconsistencies in the display styling. The object tag within the embed code used to carry various parameters but due to browser compatibility issues, the results were often a disrupted or unreadable player option. The plugins like flash and silverlight also inherited these issues and were not always able to match the browsers specifications due to being different technologies.

The HTML5 < video > element came as a good but not perfect fix for all these issues in 2008. It bought too many attributes and also the support of javascript API to handle dynamic controls over the player.

About Controls:

The basic controls are required for easy navigation across the video playback and custom controls provide homogeneity in styling and features across the devices. Nowadays, all open source and third party HTML5 players provide attached javascript with their embed code so that the player remains constant across devices and browsers.

Role of Javascript API to trigger Video Controls

Before taking about the Javascript API, let us look at the categorization of Media Elements which API provides,

• Methods like play() for reading the media
• Properties like currentTime to obtain or modify some time properties
• Events like timeupdate to trigger specific behavior for specific media events

The role which Javascript API plays can also be divided into two parts, one is writing javascript to control the player through attributes, and another is to instantiate those javascript methods with some added HTML elements. The HTML5 Javascript API has methods, properties, and events for <video> element. These allow you to control and modify default capabilities of <video> element and player using JavaScript. You can use the API to play video, pause it and play again at specific time using play() and pause() API methods.

For example:

var myVideoObject = document.getElementById ("myVideo");

myVideoObject.play()

myVideoObject.pause()

Similarly as objects, video elements also have several properties and events, like,

• currentTime : time at a given time in seconds
• duration : duration of the video file in seconds
• onplay : initiate a script when the media is ready to start playing

Sample styling of HTML Video Controls

You can change the appearance of various controls like play, pause, volume, etc through basic CSS for controls like,

.controls {

visibility: hidden;

opacity: 0.8;

width: 720px;

border-radius: 1px;

position: absolute;

bottom: 10px;

left: 90%;

background-color: blue;

transition: 2s all;

display: flex;

}

.player:hover .controls, player:focus .controls {

opacity: 0.8;

}

This CSS can be placed directly in the HTML document or can be imported via cloud hosted css link.

Need of Security for HTML5 Video Streaming

HTML5 video playback in itself does not have any default security. The basic encryption can be smartly cracked using any hack and softwares. Apart from strong encryption, we need the best key exchange mechanism so that it cannot be retrieved by any unauthorized user. What is now left is screen recording which can be addressed by additional watermarking features.

There are many open source codes available to apply encryption on HTML5 video playback through javascript. For example, the below Javascript code encrypts and decrypts your video files through a third party library.

var key = 'SUPER-SECRET-KEY';

var options = { algorithm: 'aes256' };

encryptor.encryptFile('myVideoObject.mp4', 'encrypted.dat', key, options, function(err) {

});

encryptor.decryptFile('encrypted.dat', 'outputfile.mp4', key, options, function(err) {

});

You can notice the key parameter in the above code, these keys are best secured at the hardware or OS level, which in today’s time is controlled by Google and Apple. This is the reason why normal video protection via javascript often fails. For reliable video security, the best possible way is through Google Widevine and Apple FairPlay license and set up of a DRM server. To help secure your videos, multi-DRM platforms like VdoCipher offer complete infrastructure at affordable pricing, saving coding requirements and capital investment.

FAQs

Do controls like play, pause, volume, etc, appear as default with HTML video element?

No, they do not display as default and can only be visible if you use the controls attribute with the video tag.

Do I need a plugin for HTML5 video playback?

No, after the introduction of video tag for HTML5 video playback, third-party plugins like flash or Silverlight are not required.

Why to use a Javascript file with an HTML5 third-party or open-source video player?

It is not mandatory to use the javascript file accompanied by a player. Still, in that case, you miss out on the added features and styling for different browsers, usually provided for homogeneity. This is why most players include a JS file with their embedded code. This JS file can sometimes be used to add Video SEO to the page or for security purposes.

Vishal Sharma

My expertise focuses on DRM encryption, CDN technologies, and streamlining marketing campaigns to drive engagement and growth. At VdoCipher, I’ve significantly enhanced digital experiences and contributed to in-depth technical discussions in the eLearning, Media, and Security sectors, showcasing a commitment to innovation and excellence in the digital landscape.

The post Using HTML Video Controls and Elements for HTML5 Video Streaming appeared first on VdoCipher Blog.

The Washington Post since 2013 has started to aims towards expanding readership and subscription to their digital content. This is expected to offset loss of revenues from declining print subscriptions and advertising revenues. At the moment they are experimenting with various content strategies. The target is to attract newer viewers from across the globe, while retaining the quality of their journalism that have seen their staff win 47 Pulitzer Prizes. A key aspect of surviving in the digital landscape is to maintain focus on video as a central tool for journalistic coverage. In this blog I explore how video is emerging as a key component of the Washington Post’s content strategy.

Video in Content Marketing Strategy

Currently, Washington Post’s mix of video content stands at 40% original content and 60% aggregated content. The company’s near term target is to flip this statistic to 65% of their own original content to 35% sourced from other agencies.

The company currently has 40 people on their video staff, of which 32 are regularly involved in shooting and producing content. To expand their video offering, the company posted 30 new jobs to their video department. The objective of their video strategy is two-fold:

• To chalk out videos that are complementary to their content strategy
• To create videos that gain prominence on social media channels.

To get a glimpse of how Washington Post is rolling out its video strategy, I checked out the page of their video section. The main video on the page was a video report of the Oroville dam spillway, which at the time was in the risk of a massive collapse. A visual report in such a scenario adds considerable more value to the message, unlike the case of press briefings for which value addition by video over text is much less important.

This current video strategy of Washington Post is to:

1. Complement News Story – Roll out video content that complements the news story, increasing site engagement of visitors
2. To gain new viewers – Video has the potential to engage newer viewers much more easily. Increasing the number of casual visitors directly leads to an increase in their potential subscription figures.
3. Emerge as a Video destination – WaPo’s investment in video means that they no longer wish to be considered just a newspaper with a video section, but rather a video destination in their own right. Making video a central part of their content strategy requires that they leverage various forms of video delivery solutions – this includes social media and Over the Top video.

Leveraging different media – Facebook, YouTube and OTT

WaPo recognize that it is much easier to monetize videos that are on their own website. However, in order to attract new viewers they need to position themselves on social media, mainly Facebook, and video aggregator YouTube.

Facebook is emerging as an important player in the video segment. WaPo’s strategy for promoting video for Content Marketing for Facebook and YouTube is different, because of the different nature of the two technology platforms. Facebook users are much more passive, and are on that site for diverse and an unspecified range of content. For this reason content on Facebook has to be designed to be inherently able to appeal to new users, and to be inherently able to become viral. Besides content on Facebook should make minimal requirements on the viewer’s attention span. On the other hand users are on YouTube exclusively to watch video, which affords the company an opportunity to show longer videos that require greater attention span, and a greater engagement with their content. In the meantime, you can focus on other promotional strategies such as hiring an eCommerce PPC agency or using the help of a branding company.

Washington Post’s Over The Top (OTT) strategy is to promote themselves as a video destination on OTT services such as Apple TV, Roku and Fire TV. For OTT content the newspaper has hired video personalities, who will be producing longer and more scripted videos with studio quality production values.

Long Term Strategy at Washington Post – Jeff Bezos era

Jeff Bezos has a brought a long-term planning outlook at Washington Post. The desired result is to make WaPo bigger and more profitable, at the same time. Before his acquisition the newspaper had remained profitable amid declining subscriptions and revenue only by decreasing the size of their newsroom. Bezos has given the company considerable leeway to experiment with different strategies in the hope of coming up finally with a winning strategy, to emerge as a key destination in the digital landscape.

Preliminary metrics look promising. The Post beat New York Times in unique visitors in October 2015 – their 66.9 million unique visitors beating the 65.8 million for The Times. They also beat the popular content aggregator Buzzfeed in February 2016 in number of page views – their 890.1 million page views beating both the Times(721.3 million) and Buzzfeed (884 million). To monetize their content the company is offering discounted subscriptions to Amazon Prime subscribers. Their digital subscription membership is also considerably cheaper as compared to The New York Times, reflecting a strategy to gain a lot of subscribers at lower per person subscription prices, with volume making up for lower per unit price. This is just one of the many experiments that the company is carrying out at the moment.

References:

Jan Ozer, The Washington Post is focused on video. Here’s Why, Digital Content Next

Brian Stelter, Washington Post launches major expansion of video team, CNNMoney

Shan Wang, In Revamping its Video Strategy, The Washington Post steers clear of imitating TV, NiemanLab

Dan Kennedy, The Bezos Effect, Shorenstein Center on Media, Politics and Public Policy

Siddhant Jain

CEO, VdoCipher. Writes about video tech, ed tech and media tech.

www.vdocipher.com/

The post Washington Post – Video in Content Marketing appeared first on VdoCipher Blog.