Documentation


Flash + HTML5 web video player generation

Open the software and select Normal Streaming from top menu Streaming Mode.

Web video player tutorial screenshot

Next select Stream Single Video. We will be streaming a single video file.

Web video player tutorial screenshot

The next section is Configuration where we choose the cosmetics of the web video player.

Check the HTML5 Support for iOS and Android Devices.

Web video player tutorial screenshot

Select a Video Player Style.

Web video player tutorial screenshot

Select a Video Player Size.

Web video player tutorial screenshot

You can apply a color tint to the web video player by clicking the Tint button.

Web video player tutorial screenshot

You can select the pre-defined tints for quick coloring of the player. Note that the color applied will have no effect on the player shown on the software. Once you publish, the tint will take effect.

Back to our configuration section again,

Web video player tutorial screenshot

Next, we set the following entries.

Auto Start Video:
If you click this option and turn it on, the player will start playing your video without any user interaction.

Big Play Button on Video Player: You can choose to display or not display the big play button on the video player before the start of the video.

Initialize Audio at: Pre-set your video player volume through this entry. You can put a numeric value from 0 (mute) to 100 (full) denoting the initial volume of the video player. Keep it within the 30 to 50.

We will now move on to the next section of Files and Paths.

You can opt to put an Intro Image on your web video player in its idle state. This image will show up before the start of the video. The software will automatically resize your selected image to match the video player size and output it to the output folder.

Web video player tutorial screenshot

You can remove, replace and view the Intro Image via the Intro Image tab on the right hand side.

You can also opt to put an Outro Image on your player. This image will show up after the end of the video or if a video is stopped by the user abruptly. The software will automatically resize your selected image to match the player size and output it to the output folder.

Web video player tutorial screenshot

You can remove, replace and view the Outro Image via the Outro Image tab on the right hand side.

The next step is to select the video file that we will stream over web. Click Select Video File(s).

Web video player tutorial screenshot

A window will pop open. Browse for your video files and load it onto the software.

Flash Video File: This file will be streamed by the flash web video player or the default player for desktops and laptops. For this entry you choose either a FLV file (extension .flv) or a Mp4 file having one of the extensions .mp4, .m4v or .f4v. Required.

Mp4 Video File: This file will be streamed on iOS and Android devices. You need a Mp4 file in one of the extensions .mp4, .m4v or .f4v. Note that all Mp4 files are not iOS compatible. We recommend you to encode your video files with our free web video encoder. Required.

Important: You can select the same Mp4 file for both the entries above.

WebM Video File: The WebM video file (extension .webm) is needed for a fallback support on desktop browsers Firefox and Opera. Which means, if Flash is disabled on the visitor's browser the video will still be viewable. This is an optional entry but recommended. Once again, you can encode web optimized WebM files with our free web video encoder. Optional.

You should have these files ready beforehand and on the following window just browse for the files. Once done, click Save and Exit.

Web video player tutorial screenshot

If the software senses you do not have the video files set rightly, it will show a ! sign in red, right next to the label Video File(s) in the main interface.

The next step is to choose the Server Paths. This is a very important step.

Web video player tutorial screenshot

HTML Files Path: This is the server path where you will be uploading all your files. This is a mandatory input and cannot be left blank. This path has to be a valid URL like http://www.yourdomain.com/ or http://www.anydomain.com/videos/ or http://videos.somedomain.com/

Video File(s) Path: It is recommended that you enter the same value as your HTML Files Path in this box. However, if you want to keep your video files separate from your HTML files, enter the appropriate server path here. It has to be a valid URL just like the HTML Files Path. This can be a path to another domain to host your video files only. Or a cloud space like Amazon S3.

Important:
Since HTML5 was choosen Video File(s) Path should not be left blank.

Finally provide an Output Folder for the software to output the required files. You can optionally choose to encrypt the final HTML code in this step.

Web video player tutorial screenshot

Once the code is generated, paste the code on to your HTML editor. Upload all the files from your Output Folder to your webserver in the correct path as you mentioned on the software.

If your HTML Files Path provided was http://www.yourdomain.com/videofiles/ then after you upload the files to your webserver, you should be able to test the player using, http://www.yourdomain.com/videofiles/onlinetest.html

The software creates this file onlinetest.html automatically in the Output Folder.





If you need any help with our software, customer support is just a click away. Click here.