Embedding videos to web page (FLV and HTML 5 videos)

1. Embedding videos to web page (FLV and HTML 5 videos)
This step by step guide consists of the following 3 sections:
Part 1: The good old method of adding Flash Video (FLV) to a webpage
Part 2: Learning how to use open source VideoLAN’s VLC player to convert video to formats
supported in HTML5 by different browsers
Part 3: Embedding videos using HTML 5 <video> tag
Part 1: Adding Flash Video (FLV) to a page
1. Launch Dreamweaver CS 6, create new site and link to local folder.
2. Create a new HTML 5 file, give it a title “FLV and HTML 5 Video” and saved it as
video.html.
3. Choose Insert > Media > FLV.
4. When the Insert FLV dialog box appears, make sure the Video Type is set to
Progressive Download Video. See Figure 4. Take note of the other Video Type.
Figure 4
5. Click Browse and navigate to the movie folder in the site root. Choose italy.flv.
6. From the Skin type, choose Corona Skin 2. Click OK.
7. Click the Detect Size button to enter the Width and Height of the video automatically.
Select the Constrain and Auto Rewind options. Click OK. Refer to Figure 7.
Figure 7
8. The Corona Skin 2 will easily fit the limited width of the sidebar, and it interactively
appears and disappears when the visitor moves his cursor over the video.

2. 9. Dreamweaver inserts a placeholder, which can be customized somewhat with the
Property inspector. FLV files cannot be previewed within Design view and must be
viewed in Live view or a browser. See Figure 9.
Figure 9
10. Save the file. When you save the file, the Copy Dependent Files dialog box may
appear displaying a message explaining that the dependent files expressInstall.swf
and swfobject_modified.js will be placed into a new Scripts folder. These files are
essential for running an FLV file in the browser and must be uploaded to your web
server to support Flash functionality. If and when this dialog box appears, click OK.
Figure 10
11. Preview the page in Live view, or preview the page in the browser. If the video controls
are not visible, move your cursor over the still image to display them. Click the Play
button to view the movie. There is no sound in this movie, but the controls include a
speaker button to turn the sound off and on, as in Figure 11.

3. Figure 11
12. When you’re finished, switch back to Design view.

4. Part 2: Using VideoLAN’s VLC to convert video
You’ve added an FLV file and controls that allow the user to start and stop the video, and to
turn the sound off and on. You also detected the size of the video automatically.
However as more users are accessing the Internet via mobile browsers on iOS, Phone 8 and
Android platform, the recommended method to embed video is to use the latest HTML
<Video> Tag.
The problem is that HTML 5 video does not support FLV format. Two other formats are
required to support all browsers:
1. MP4 format to be playable on iOS Safari and IE
2. OGG format to be playable on other browsers (Eg Firefox, Chrome and Opera)
Procedure:
13. Download and install the VLC player.
14. Open the source file (eg italy.flv) using VLC player.
15. On the Menu: File > Streaming / Exporting Wizard

5. 16. Select "Transcode / Save to file", then "OK".
17. Choose "Existing playlist item", select the source file (eg italy.flv) and "Next".
11
22
33

6. 18. Check "Transcode video", select "MPEG-4" for mp4 or "Theora" for ogg format.
Check "Transcode audio", select "MPEG-4 Audio" for mp4 or "Vorbis"" for ogg format.
Then "Next".
19. Select "MPEG 4 / MP4" for mp4 or "ogg" for ogg format. "Next".

7. 20. Select "Choose .." then in the popup, select the location and type in the filename (eg
"italy") , "Save". Then "Next".
21. Just click on "Finish" and the conversion will start.
That’s all to the conversions.
11
44 22
33

8. Part 3: Embedding HTML 5 videos
For newer browsers, they will play the HTML 5 video (MP4 or OGG format) but for older
browsers (such as IE6 on Win XP), they will play FLV using the Flash Plugin. We need to
add code to Part 1 as follows:
22. Switch to code view. The code will take care for browser without flash player to provide
the link to download. For those with latest flash player, it will run the
“FLVPlayer_Progressive.swf” (basically a FLV player) to play “italy.flv” file.
23. Add the following code (before and after the <object> tags).
Use “<!-- xxx xxx xxx -->” to add HTML comments.
:
:

9. 24. Modify the code to include additional attributes for the <video> tag.
For more attributes and their possible values, refer to the following table:
25. Add in the <source> tags to point to the two video files.
26. Save and preview in the various browsers (IE, Firefox, Chrome, etc).