Embedding videos to web page (FLV and HTML 5 videos)
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 webpagePart 2: Learning how to use open source VideoLAN’s VLC player to convert video to formatssupported in HTML5 by different browsersPart 3: Embedding videos using HTML 5 <video> tagPart 1: Adding Flash Video (FLV) to a page1. 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 asvideo.html.3. Choose Insert > Media > FLV.4. When the Insert FLV dialog box appears, make sure the Video Type is set toProgressive Download Video. See Figure 4. Take note of the other Video Type.Figure 45. 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 78. The Corona Skin 2 will easily fit the limited width of the sidebar, and it interactivelyappears and disappears when the visitor moves his cursor over the video.
9. Dreamweaver inserts a placeholder, which can be customized somewhat with theProperty inspector. FLV files cannot be previewed within Design view and must beviewed in Live view or a browser. See Figure 9.Figure 910. Save the file. When you save the file, the Copy Dependent Files dialog box mayappear displaying a message explaining that the dependent files expressInstall.swfand swfobject_modified.js will be placed into a new Scripts folder. These files areessential for running an FLV file in the browser and must be uploaded to your webserver to support Flash functionality. If and when this dialog box appears, click OK.Figure 1011. Preview the page in Live view, or preview the page in the browser. If the video controlsare not visible, move your cursor over the still image to display them. Click the Playbutton to view the movie. There is no sound in this movie, but the controls include aspeaker button to turn the sound off and on, as in Figure 11.
Figure 1112. When you’re finished, switch back to Design view.
Part 2: Using VideoLAN’s VLC to convert videoYou’ve added an FLV file and controls that allow the user to start and stop the video, and toturn 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 andAndroid 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 arerequired to support all browsers:1. MP4 format to be playable on iOS Safari and IE2. 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".112233
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.1144 2233
Part 3: Embedding HTML 5 videosFor newer browsers, they will play the HTML 5 video (MP4 or OGG format) but for olderbrowsers (such as IE6 on Win XP), they will play FLV using the Flash Plugin. We need toadd code to Part 1 as follows:22. Switch to code view. The code will take care for browser without flash player to providethe 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).