Your Source for Premium Adobe Muse Templates, Widgets and Tutorials

Responsive Self-Hosted Video Player

We wanted to create a video player that could play any self-hosted or remote hosted video. The widget had to be very customizable and easy to use. This is that widget.

Posted by Chris Kellett on 12/13/2017

1.0 Self Hosted Video Player Release Candidate

This video player is ready for release. There is an incredible amount of customization available in the widget allowing it to compliment any Muse design. We have also enabled access to the captions capabilities. Whilst we do not currently have tutorials relating to the creation of VTT files used by the player for captions we thought it was worth putting the capabilities in.

If you would like to add subtitles to the player take a look at this service (Amara.org) to get you started. This player works with the files created with Amara.

Posted by Jason Tinnin on 12/13/2017

1.0 Beta Self Hosted Video Player poster image fix

In the 1.0 beta post, we noticed an issue with the widget in Muse that would resize to an odd set of dimensions if the poster image was not loaded in design view. The issue has now been resolved.

This means that if the video player is placed on the page and the poster image is removed it will not cause the video player to resize and mess up your layouts.

Posted by Chris Kellett on 12/13/2017

1.0 Beta Self Hosted Video Player ready for testing

The widget is ready for testing. However, I noticed that when a poster image is not loaded the video player loads with odd dimensions until the poster is loaded and then it resets to the correct size. Everything else works great. see below.

Posted by Chris Kellett on 12/12/2017

Initial brief for Self Hosted Video Player

This widget is part of a broader approach to using video in Muse. This widget will be part of a bundle of video players. The bundle will include a Vimeo, YouTube, Facebook and Self-Hosted video player. Why not make one widget that does it all? Here's why...

  • When you include a Vimeo video in a widget unless you are using the API (which requires user authentication) you are actually placing a player in a player. This seems to be a crazy way of placing video into a Muse project.
  • The same can be said for Youtube, not only that if you use a method of covering up the player branding or hiding the player branding you are in breach of YouTube Terms most notably "You must not display overlays, frames, or other visual elements in front of any part of a YouTube embedded player, including player controls. Similarly, you must not use overlays, frames or other visual elements to obscure any part of an embedded player, including player controls."
  • The if you add Facebook video into the mix you have to have a lot of conditional content to allow for each different player.
  • At this point, it makes sense to have a robust, responsive widget for each video service type.
This widget builds on the previous CVP (Custom Video Player) widget improving its responsive design functionality and reducing the code base to handle self-hosted and remote hosted video files only.

Download

By downloading this item, I understand that this is in "pre-release" status so normal support considerations are not applicable.


Other Lab Projects

Age Checker Widget Background Video Favicon / Web Clip Icon Maker Fyuse Embed Widget Responsive Facebook Video Player Responsive Self-Hosted Video Player Responsive Vimeo Video Player Responsive YouTube Video Player YouTube Playlist | Gallery