HTML5 VIDEO-PLAYER

We recommend
Other Dreamweaver Extensions:
flash music player
mp3 music flash
VIDEO5 Player is capable of using HTML5 standard in new browser versions and flash technology in older ones, or those browsers that don't yet support HTML5.

HTML5 Video Player

INTRODUCTION

The popularity of online videos is on the rise, now also spreading to mobile devices such as smartphones, tablets, etc. Nowadays these devices support videos in several formats. Before, the solution was simpler: there was a common format (FLV), while Flash-based applications were used for playback. At this time, many mobile devices stopped supporting Flash and decided to use a new HTML standard, the HTML5.

Our product, Video5 video player, is a solution that complies with both tendencies. The video player first verifies that the browser supports HTML5 and plays the video according to the HTML5 standard, otherwise it uses a player based on Flash. In both cases it maintains the same visual presentation so that the final user does not realize the difference in formats during playback.

FEATURES

Main features of Video5 are:

  • Great portability by browsers: uses HTML language as well as FLASH version 5;
  • Visual adaptability: the player's visual characteristics can be modified quite simply by modifying the styles in the Video5.css file;
  • Easy intallation and use: Video5 is distributed as an extension for Adobe Dreamweaver. Its installation and use is 100% visual through a wizard or a setup window;
  • Handy controls to manipulate the video during playback: play/pause button, position bar, mute button, volume control bar, and finally, a Switch-to-Full-Screen button.

Instant Download (Video5): USD $29.99

Preferred payment method:
Fast checkout through Google
Alternative payment method
(5% surcharge applies):

You will be redirected to a Download Page after payment. Your Download Link will be also emailed to the address used for the payment.

REQUIREMENTS

Video5 is a video player that is distributed as an extension for Adobe Dreamweaver, specifically for MX 2004 or later versions, including CS4 and CS5. Dreamweaver is therefore the only requirement for Video5.

INSTALLATION

To install Video5, start the application "Adobe Extension Manager", distributed along with Adobe Dreamweaver and which can be accessed via the option "Manage Extensions..." in the Dreamweaver's Help menu.

Once the Adobe Extension Manager is running, select "Install" and enter path to the downloaded Video5.mxp file.

Once Video5 has been installed, it can be accessed via the option "Insert Video5" in the "Insert" menu, or through the "Insertion Bar" (in the "Common" category). (Fig. 1)

Insertion Bar

USE HTML5 VIDEO PLAYER

Insertion

During the process of insertion of Video5 into a web page, a setup window will appear, which will allow to enter the desired video player size, "poster" image, videos to play, etc.

Interface description

Configuration window

Video Width: an integer that represents the width of the video in pixels; required field.

Video Height: an integer that represents the height of the video in pixels; required field.

Autoplay: check off this option to force the video to start playing automatically. If this option remains unchecked, it will require the user to begin the playback manually.

Loop: if this option is checked, the video will be played back continuously: once finished, it will be started again from the beginning.

Show controls: if this option is checked, the player's controls will remain visible, otherwise they will be hidden when the mouse pointer is outside of the video area.

Poster: enter the URL to an image related to the video. When the video is shown in HTML5 version, the poster image will be shown until the video is played back.

Note: in the Flash version, the poster is not shown.

Sources: enter the URLs of the video to be played. You can enter several URLs in this option, but it does not mean that they will be played back one after another like in a playlist. Browsers support different video formats, which is why it is recommended to enter as many versions of the same video in different formats as necessary to comply with most browsers. Video5 will take care of selecting the right video version depending on user's browser. When you enter a video in FLV or MP4 format, a flash player will be inserted into the web page, which will be shown only if the user's browser doesn't support HTML5.

Modifying Video5

If you wish to modify any of the setup values, simply add a <DIV> label with "Video5" class (Fig. 3)

Select the <div> tag with video5 class assigned

and make the appropriate changes in the "Properties" window (Fig. 4).

Properties inspector

Once the video is inserted in the web page, a folder named video5 will be automatically created in the website's folder structure; this folder will contain all the code necessary for the correct functioning of the video player, as well as the video5.swf file needed to play video through flash. The new folder, the video5.swf file and the modified webpage must be published onto your website.

BROWSERS THAT SUPPORT HTML5

Not all current browsers support HTML5 standard; those that do support HTML5's video tag are mentioned here below:

  • Chrome 4
  • Firefox 3.6
  • Safari 4
  • Opera 10.5
  • Internet Explorer 9

Video formats

Video formats supported by Video5 depend on the browser where the videos are displayed. Below is a table showing the video formats supported by each browser.

BrowserVideo formats
Chrome 4ogg, H.264
Firefox 3.6ogg
Opera 10.5ogg
Safari 4H.264
Internet Explorer 9H.264
FlashFLV, H.264, MP4, F4V and other formats depending on user's flash player