HTML5 Media - HTML5 Advertising

HTML and CSS Reference

In-Depth Information

Next, you'll need to include some attributes to customize the video experience for your particular use case. In the

following example, I've included a source, a height attribute, and a width attribute:

By writing this, I've instructed the browser to render an HTML5 video element to play back the file

yourVideoFile.mp4 at the dimensions 640x360. If you want to include video controls, you simply add another

attribute by writing the following:

The browser will now render the player's controls. Otherwise, you can keep the controls hidden and create your

own. You can do this by using CSS to style the control elements and by using JavaScript to handle the video's behavior.

Obviously, this method is much more streamlined than the Flash-based example.

Let's first take a look at the markup that drives HTML5 video and deconstruct its syntax, and then I'll get into the

nitty-gritty of development. Consider the code in Listing 7-2.

Listing 7-2. HTML5 Video Playback Example

<html>

<body>

<video>

</video>

</body>

</html>

The preceding code uses the new HTML5 video tag along with the necessary source tags, which allows the browser

to call on the supported video file. Ideally, there would be one supported file format that every browser can handle. If this

were the case, having the video's source inline would work as well, as demonstrated in the following example:

It's important to make sure that the server hosting and delivering your files has the correct MIME type set to

deliver the file format for each video file. Also, be sure to specify the type attribute so the user's browser doesn't

download files it cannot play. Essentially, dictating a type with a MIME type and codec allows the browser to

effectively choose which file it needs.

So, you may be asking, “What happens if my advertising campaign needs to reach the widest audience possible?

Including support for older IE versions?” Simply, you really have two options: either use Google's Chrome frame or

have a Flash failback.

Google's Chrome frame injects a Webkit rendering engine inside IE browsers, which gives you the ability to

render HTML5 content inside the older IE environments. Alternatively, having a Flash failback will allow your users

to have HTML5 video first, and in the event the video tag isn't supported, the previous method will be used via the

object tag for a SWF file.

HTML5 video is a great advancement to the browser. The video element supports an array of features and

attributes, and support within the current browser market is almost stable. However, as with all emerging things, it

can have a few inconsistencies, and it doesn't stop at the video element itself for its fragmentation. Support across

browsers, screens, and devices requires a multitude of source video files to actually play back the video asset from

within the HTML5 video tag. As you may have guessed, it takes some time and money to create, size, transcode, and

Search WWH ::

Custom Search

Home