HTML5 Video Player Widget

An Adobe Muse Widget that allows you to use and import a local video.


Features

Cross-Browser compatible

All browsers either use MP4, Ogg or WebM files to render videos and this widget allows you to use MP4 as main video file and Ogg and WebM file as Alternate formate.

Add Poster Image

This Widget allow you to add a poster image while browser is loading the video file. This is very usefull when you use a lagre video file or in case of slow internet connection

Better User Controls

Decide what kind of control site visitor has over your video. You get the combination of contols option like Loop, autoplay, muse and controls.

HTML5 Codes

Codes created by this widget are HTML5 based codes and do not requires you to add any external JS or any FLA or FLV file.


How to Use

Once you download the file, Fing "Musepen_HTML5video_Player.zip" in your Downloads folder. Double click on the .zip file to export it. You will now have a folder named after the widget.  Now follow the steps below.

1. Look for Musepen_HTML5video_Player.mulib and double click on it.

2. If Muse is not open it will lauch Muse and will add the widget to Library Panel.

3. The imported folder (Musepen widgets Collection) will appears in the Library panel, ready for use in the current file. Then drag/drop the widget to your project, set the options and enjoy!

In this widget you get the option to a Mp4 file as primary video and OGG and WebM File format as an alternate media type. Its not mendotary to add OGG and WebM files but It is advised as there coud be a site visitor that may have an older version of a browser that do not support MP4 media type.

Add file :

  1. To add an MP4 file Open Widget option by clicking Blue circle on the right side top of the widget and click on "Add File" in front of "Choose MP4 video"
  2. This will take you to the Windows explorer of finder to select your local MP4 file.
  3. Once you select the MP4 fine it will automatically add this file in Assets tab.
  4. Similarly add OGG and WebM file in the subsequesnt options.

In this widget you get the option to add poster image as in case of slow internet connection video file will take some time to load . In the meanwhile this poster image is shown in place of the video.

Add Poster Image :

  1. To add Poster image Open Widget option by clicking Blue circle on the right side top of the widget and click on "Add File" in front of "Choose Poster Image".
  2. This will take you to the Windows explorer of finder to select a PNG or JPG image.
  3. Once you select the poster image it will automatically add this file in Assets tab.

While Displaying Video in a site its very important to add proper user controls . This widget allows you following controls

  1. Controls : If you check this option in Widget option panel your site visitor will be able to see control panel and can ply, pause, mute and make it full screen. In case its not checked he will not get any option.
  2. Autoplay : If you which this video to autoplay once the page id loaded check the options for "autoplay on Widget option panel.
  3. Loop : If you check this option then video will keep on looping as soon as its over.
  4. Muted : Checking this option will load the video in Mute mode. user would need to unmute it for audio.

Here is all we have for you in this Free Muse widget. Keep on exploring musepen.com for more Free Muse widgets.


Video Tutorial