HTML5 Video

The Morfik HTML5Video package contains a single widget (HTML5 Video) that adds support for the HTML5 <video> tag and includes fallback support using Flash for browsers that don’t handle HTML5 video or some video encoding schemes.

A Quick Walkthrough

To use the Morfik HTML5Video package simply add the package to the project by utilizing the “Used Packages” command on the project ribbon (see Figure 1 Used Packages Command), or simply drag the package file onto the application main client area.

security-fig1.png
Figure 1: Used Packages Command


Once added a single widget will appear on the home ribbon when the form designer is active (see Figure 2 Widgets List). This widget can be placed on an application form and provide immediate functionality with minimal coding.

1.jpg
Figure 2: Widgets List


How to Use the Widget

After dropping an HTML5 Video widget on a form, the property manager can be used to configure the widget. Two properties that need to be set are the Video Mpeg 4 and the Video Ogg properties, which are discussed below. Once these are set the video can be played in the control. This HTML5 video player is based upon the javascript library that can be found at http://videojs.com/.


Important Properties

Three pairs of properties are important for the correct functioning of the HTML5 Video widget: which ones are used depends upon whether or not a data source is used for the form containing the widget. The Video Mpeg 4, Video Ogg and Poster properties should be assigned when not using a data source and the Data Field Mpeg 4, Data Field Ogg and Data Field Poster should be assigned when a data source is used.

In the case where a data source is not used, all three properties can be URLs pointing to internet sources or relative paths to local sources in the application’s resource file or a subdirectory. If a data source is used then the properties should reference an internal blob field or a linked blob field in the dataset. To extend the number of browsers that can play the video, both an ogg encoded video file and an mpeg4 video encoded version of the same file should be specified. If the browser does not support HTML5 video or does not support ogg files, then the mpeg4 file will be used to play the video in an external Flash player. The Poster properties should be set to an image file that will be displayed in the screen of the player before the video playback is active. If no image file is specified the screen will appear black.


Controlling Playback in the Browser

There are three object methods and one global function that can be used to control the playback of the video in addition to the built-in controls of the player. To pause the player, use the HTML5Video1. PauseHtml5(Event) method, to stop the player use HTML5Video1.StopHtml5(Event) and to start the player use HTML5Video1. PlayHtml5(Event). In addition the global procedure StopAllHtml5Video can be used to stop any active video players.


Note: Currently these control methods are not supported by Internet Explorer 8 however the player itself will perform without problem.


Note: When using the Apache server for a web application and using files in the application repository, the http.conf or .htaccess file must be configured with the video file types or the browser will not be able to identify the file type.

See Also


Back to top