Inserting HTML5 Video - Creative Cloud & Dreamweaver CS6
Dreamweaver has greatly improved support for HTML5 video, enabling it to automatically detect video files in different formats as you'll see in this video.
Insert an HTML5 Video
To insert an HTML 5 video on your page:
- Place your cursor outside the end tag of a section.
- Select the HTML5 Video option which is available through the Insert menu or in the Insert panel directly under the Common or Media categories.
- When selected, a tiny grey box will appear as a placeholder.
- In the Property Inspector, navigate to the Source field and click the the Browse button (folder icon).
If your video folder contains the same video with different extensions, CS6 will detect this and automatically place the like videos as alternative sources for the selected video.
Create a Video Poster
To create a poster for your video:
- Select your video to view the Property Inspector.
- In the Poster field, click the Browse button.
- Select your poster for the video.
- Click OK.
CS6 will automatically detect the poster size and apply the sizing into the coding. For simplicity, it is recommended that the poster be the same size as the video so that the user interacts minimally with the actual coding, minimizing errors.
- In the Property Inspector, you can also decide if the video will have the following options applied:
- Controls (selected by default)
- Video Loop
- Auto Play
- Muted Play
- It is recommended that users set a Preload. You can choose between the following:
By default, the preload is set to None; however, it still needs to be activated. To enable the preload, select Auto then select None. This makes CS6 recognize that the user wishes to use None as the set preload.
- Metadata - loads a few frames of the video before a site visitor presses play
- Auto - auto-loads the video before a site visitor presses play
- None - loads nothing until a site visitor presses play
- Be sure to set the Class for the video as well. This allows you to better manage where the video sits on the page.
Once completed, you can test everything out in Live View!
Dreamweaver 12.1 Creative Cloud Update
Dreamweaver is a popular Adobe program for creating websites and applications. It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.
You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV. The video in this article is courtesy of Adobe TV.