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.

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.

Figure 11

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

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

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

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".

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 2233

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.

: :

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).