DM 20  Assignment 8     Video in Web Pages

Due Tuesday, May 8


(to Part 2 | to Part 3 )

 

In this assignment you'll learn ways to display video in web pages.

In the past, most videos you watched on the Web were viewed through a third-party plugin - maybe Flash video, maybe QuickTime. These plugins integrate with your browser well enough that you may not even be aware that you’re using them. That is, until you try to watch a video on a platform that doesn’t support that plugin.

In recent years there have become more and more options, more devices and different platforms people watch videos on. Flash video (.flv) - once the absolute go-to choice for videos on the Web - no longer dominates the field, as more viewers use mobile devices that do not support the .flv player.

HTML5 defines a (relatively) standard way to embed video in a web page, using a <video> element. This method is still evolving, which is a polite way of saying it doesn’t work absolutely everywhere, but so far it does come the closest to covering as many platforms, computers, devices and browsers as possible.

Codecs
The word codec is a combination of the terms coding and decoding.

When you watch a video, you’re usually playing a combination of a video stream and an audio stream. You don’t have two different files; you just have "the video". Maybe it’s an MOV, an MP4, a WMV, etc etc. These are called container formats, like a ZIP file that contains multiple kinds of files within it.
This container format "encodes", that is, defines how to store the video and audio in a single file.

And when you play the video, your system "decodes" the file, doing at least three things at once:
Interprets the "container", or file format, to determine how to decode (play) it
Decodes the video stream and displays the sequential frames we know as 'video' on the screen
Decodes the audio stream and sends the sound to your speakers/headphones

HTML5 uses one <video> element for displayng video in a web page. This one <video> element can link to multiple video files, and the viewer's browser will choose the first file format it can play. In other words, it gives choices. The viewer's system and browser will automatically play the first one it can.

Currently, there is no single combination of containers and codecs that works in all platforms/browsers. This is not likely to change in the near future.

HTML5 video narrows it down to three file formats that it presents as choices: mp4, webm, and ogg (aka ogv).

Here's a very abbreviated list of which file formats certain browsers/platforms can play:
--- MP4 - Mobile phones (Apple’s iPhone, Google Android), Safari, Internet Explorer 9+
--- WebM - Firefox 4.0+, Chrome
--- Ogg or Ogv - older Firefox, older Opera

Basically, you take your one video file and convert & save it in different formats so you have 3 separate versions of it.
And the HTML5 code in your web page presents these choices to your viewer's browser and it takes it from there.

There are many converters out there, but not a lot we can use in the DM lab. We're going to use an online conversion site to convert an mp4 twice - once to the .webM format and then to the .ogv format - and then you'll have Dreamweaver write the necessary code for you when you insert an HTML5 video element in your web page.

To begin, create a new folder inside your root folder, name it A8-1
Put an mp4 video of your choice in your A8-1 folder. Use your own or go to the W drive>DM20>sampvids folder and choose one from there.
Make sure your mp4 file name has no spaces.
(If you're not in the lab, you can download the sampvids zip here.)

Then go to cloudconvert.com  

(Alternative conversion sites if cloud-convert gets overloaded: video.online-convert (convert to webM)  and here to convert to ogv)

At cloudconvert.com, click the "Select Files" button and navigate to your mp4 video in your "A8-1" folder and click Open.

Once your video uploads, in "select output format" choose "video" , then "webm":

...and click the Start Conversion button in the upper right of the page.

Once it's done converting, click the Download button, and Save the .webm video file into your A8-1 folder.

Then do an ogg version too - in the cloud-convert page, click the Select Files button again and from your A8-1 folder, choose your .mp4 video again, and in "Select Output Format" this time choose ogg video:

Then click the Start Conversion button again, and when conversion is done, click the Download button, and save your .ogg video into your A8-1 folder along with the others.  Close the cloud-convert page when you're done.

 

Next, launch Dreamweaver CC (DW CS6 won't work for this), go to Site > Manage Sites and select your site or import your dm20 .ste file.

File>New to make a new html document, name it A8video1.html and save it into your root folder's A8-1 folder alongside your 3 video files.

Replace "Untitled Document" with an appropriate title.

Choose your page's background color, font, font color and links colors.

Next, center your new page - in DW's Properties panel, click the CSS tab, then click the "center" icon:

Then switch back to the HTML tab:



Then go to DW's top menu, Insert > HTML > HTML5 Video

Dreamweaver displays an icon to denote that you've got video there -

Click once on that icon to select it and look in the Properties panel.

For Source, use Point to File to insert your mp4 file there, and Dreamweaver fills in the ogg and webm versions as the Alt Sources, as pictured below:

Also, checkmark the "Controls" and "Autoplay" boxes as pictured above.

You can leave W and H (width and height) blank unless you want your video to display at a different size than it really is - although that's not really recommended - you could make it display as smaller without too much degradation, but trying to enlarge it would most likely start to blur or pixelate it.
Most browsers will display the video at its correct dimensions if you leave W and H blank.

File>Save and Preview in Browsers to see your html5 video in action.

Check it in all browsers you have available - you'll see that each one has a different-looking player, but they all should play your video - even Internet Explorer - although for local (unpublished) content you may have to click IE's "Allow Blocked Content".

Next, click just to the right of the video icon in your page and press Enter to move down a paragraph.
Type   Projects Menu  beneath your video and use Point to File to link it to your menu.html page.

File > Save, and Preview in Browser(s).  When you're satisfied with the result, click once on your A8-1 folder to select it in your Files panel and click the Put arrow to publish all the contents of the folder.  (If your video files don't upload, check to make sure you don't have them still open somewhere - Dreamweaver won't publish files it considers still playing or open elsewhere on your computer.)

Then add a link,  A8-1 Video, in your Projects Menu page and use Point to File to link it to your A8video1.html page.

Preview in Browsers to check out your links.  When satisfied, File>Save, and then Site>Put to upload your revised menu.html page to the server.

Go to our class homepage, click your name and check your work online.

continue with Part Two