Video - MP4 Converting and embedding (JW Player 6)
In previous lessons we used Windows Live Movie Maker to do basic video editing (trimming a shot or pasting two shots together). Though Movie Maker uses the WMV format, it can export video in the preferred mp4 format. One option for making such a video available online might be to use Youtube. Your Youtube based video could then be embedded on your web page. We will also explore using free software to convert your video to mp4 format if necessary and prepare it for online playing from your own site.
For this lesson, we will suppose that you already have a video in some format that you wish to put on a page. We will use a video from a previous lesson as an example. The video is in wmv format and has the file name: webcam-vid-2.wmv. In the sample to the left, this video requires the Windows Media Player plug-in, so it may not work in your browser.
Although this works in most cases, you, as the web page designer, have no control over whether it will work on your user's computer. A better solution that gives you more control is to use mp4 video format with a player that is built into the page, downloaded from your own web site, and is more compatible with various operating systems and web browsers.
Finally, a very easy solution today is to use the HTML5 Video Player with mp4 video.
Basics
If you prepare a video to use in a lesson with your students, whether the video is created with a digital camera, a digital video camera, or some other source, it will be easiest for you to create materials consistently if you are used to using a single format for your video. It is also a good idea to use compression and consider the size (resolution) of your video. Your original video will have a certain dimension (width & height) and will be in some video format (mov, avi, flv, mp4, etc.). If you do not know the size (resolution) of your video, right click on it to see the details of its properties.
Two common formats for digital video match the standard sizes for television video.
320x240, 512x384, 640x480 (in pixels) are all 4:3 aspect ratio; in other words, the ratio of width to height is always 4 to 3. If you change the video size (resolution), you should be careful to keep to the same aspect ratio. This is like the old square format TVs. Our example above is 320x240.
A second popular aspect ratio is 16:9. Examples are 768 x 432, 512 x 288, 640 x 360. This is like newer widescreen LCD TVs. Our example is 640x360. A higher quality and larger 16:9 size is 1280x720; this is also the preferred size used for high quality (HD) on Youtube.
A 16:9 ratio is wider than 4:3and can be useful for filming a scene with several people, for instance a student play. A 4:3 ratio is more square and can be effective for filming a single person talking. We are likely to see less and less 4:3 video as time goes on.
MPEG4 (mp4) has become a more popular video format because it has fewer compatibility issues than FLV, WMV, AVI, or other formats. For instance, it works well on an iPad.
If you prefer to avoid working with the configuration of the video yourself, you might prefer to use a service such as Youtube to upload and put your video online. But even doing this, your quality will be better if you know a bit about what you are doing. Video is considerably more complex than images or audio alone and can be confusing to the newcomer because there are so many properties that can be configured.
Here we see that we have added the video webcam-vid-2.wmv to the work area of Any Video Converter (AVC), and we are going to convert it to mp4 movie format using a Video Codec: x264 and an Audio Codec: aac. The original Frame Size of the video is 320x240. This is the size I want, so we won't change it, though there are many Frame Size options available. If you don't want to change the video size, the easiest option is to select "Original" Frame Size, but any size you pick will make the video bigger or smaller. Avoid trying to make a video bigger than the original size because the quality will be poor.
Video Bitrate controls how much data per second is in your file. This will affect image quality. Too high and your video might not be able to download fast enough to play. Too low and the quality of the video will suffer. With a smaller resolution video, you can get away with a lower bitrate (IOW a smaller file size). On today's Internet, a bitrate should probably be no higher than 768, for a high quality fairly large video, and lower (512, 384, 256, 192) might be safer if it doesn't hurt your quality. In our video sample, because the size is fairly small, we were able to use a bitrate of only 192 with no noticeable loss of quality.
Video Framerate (how many images per second) should be the same as your original if possible. This will tend to be 25, 29, or 30, depending on your source. I use 2 pass encoding (slower bit higher quality).
For audio, the aac Codec is highly compatible. Audio Bitrate 128 and Sample Rate 44100 is very high quality, fine for stereo music. If your original audio is not stereo, you can save space using mono (Audio Channel 1) with a lower bitrate. You can also use a lower sample rate if your audio is voice only. 64 and 3200 should be fine for mono voice like the video we are using in our example.
Write down the 4-5 options that you select so you don't have to figure it all out again later.
Additional options are available, and Any Video Converter can do far more than we are covering here. For example, during the conversion process, it can normalize the audio.
Generally, you should save your original video in mp4 format so you do not need to convert it later.
MP4 FastStart
Streaming means that the file plays while it is downloading; it doesn't wait to be downloaded before playing. When placing an mp4 video on a web page, streaming can often be improved using mp4 faststart. This helps the video begin playing as soon as possible instead of downloading more of the video first. There is a faststart setting in AVC, but it is possible that a program like MP4 Faststart will do a better job. You can use it to make your video start faster if you have a lag.
JW Player 6 (skip this section and see below for simpler HTML 5 video option)
There are a number of ways to embed a video object in a web page. Certain player objects work with particular video formats. In many cases, the actual player used depends on whether certain software such as Windows Media Player or Apple Quicktime Player is installed on the user's computer. If the user doesn't have the software, they might need to download and install it, if they can.
A different approach is to build your own copy of the video player into the web page. The JW Player is a free player that you can use on your web site for non-commercial uses. It can be easily installed in a web page and can handle mp4 and flv among other formats. JW Player 6 can also use HTML5 for compatibility with iPads and adjusts to the best format automatically.
After downloading JW Player as a Zip file, extract it to a folder containing a number of files. Only three of these files are necessary to allow your web page to use the JW Player. These are jwplayer.js , jwplayer.flash.swf & jwplayer.html5.js. Your web page doesn't care where these files are located, as long as you accurately point to their location on your web server. The easiest way to keep the location clear and also to update the player when there is a new version is to place only a single copy of the player on your web site and to put these two files in a jwplayer folder located in the root directory of your web site. Then any web page with video will need to point to this location to find the player.
JW Player (version 6 works differently from version 5 which is presented in another lesson)
To put a player in a web page, you first need to put the following script into the header area of your web page source code. Assuming that the jwplayer folder is in the same main folder as your web page:
Depending on exactly where you put the jwplayer folder in relation to your web page, the actual location might be different. For example, to go up a level in your folder structure, the code would be:
This is similar to creating a link to a web page in a different folder, relative to your web page. Once the Script tag has been placed in the page header, the page will be able to use the player object. Here is the same video in mp4 format using the JW Player:
Loading the player...
The code for inserting the video player is pasted into the page's source code. The parts that might need to be edited are in bold. The element name, myElement1,must be different for each video on a page. It doesn't matter so much what it is called as long as no two videos have the same name and the div id and jwplayer that go together do have the same name. Use the correct names for your video and image files. The image file is what will appear in the player before you begin playing the ideo. Finally, the size should be the same as your video. But changing the size will change the apparent size of your video as it is playing.
We'll walk through the setup. The first part of the player code is a DIV tag.
<div id="myElement1">Loading the player...</div>
The DIV is just a section of code. Each DIV on a page needs a different ID, so you might call the first one myElement1, the next myElement2, etc. It doesn't matter what this name is, so vid1, vid2 vid3 would be fine. This div functions as a holder for the video player.
In the actual script that follows the DIV, we are using the same ID, "myElement1". The file property tells the jwplayer the name and location of the video file. In this case we just needed the file name because the video is in the same folder as the web page. The image will be displayed in the video player before the video starts playing.
Our video is 320x240. It is also possible to stretch the video if we wish. To get a video that is twice as wide and twice as high (640x480), we use a width and height of 640 and 480. Stretching a video (like increasing an image size) will result in lower image quality, but it also gives us a larger video with a smaller file:
Loading the player...
The advantage of version 6 over version 5 is that it will automatically use either HTML5 or Flash format, whichever is best for the browser or computer you are using. You CANNOT mix the two players because they use the same names to refer to the program.
HTML 5 Video tag
Finally, here is a player that uses the simpler HTML5 <video> tag:
You can set the size (height and width), add an image that will appear before the video is played (poster), include controls, and set the video file (source).
Video can be a very effective pedagogical tool. By always using the same sources and settings for your video, you can avoid the more complicated choices that can come up if you are frequently using videos of different sizes & qualities from different sources. If you can use a single video shot with your camera, you will also avoid the need for editing. Keeping it simple can make the entire process easier to manage.
Try your own hand at this:
Download a video about the English past tense and try it out: (use Firefox & Video Download Helper.)
