23 05, 2017

How to Setup a Video Loop or Video Teaser for Desktop and Mobile Devices

By | 2017-06-16T12:46:44+00:00 May 23rd, 2017|Categories: Web Development|Tags: , , , , , , , , |

If you need to have a video loop or video teaser on your web site, there is an easy solution. It’s done with the HTML5 video tag. In this case it would be a simple looping video with sound muted. This can help give the site some extra depth or visual appeal.

This method works well for mobile phones, since those tend to have more security and particular operating system functions. iOS as an example in version 10 has the ability to play video loops.

It comes down to a few attributes for the HTML5 video tag.

  1.  Autoplay – to start the video when the video and page loads
  2. Loop – this allows the video to continue playing. You can define the amount of times or it can be infinite.
  3. Muted – turning the video to mute out of box allows it to autoplay on iOS devices. In the latest iOS versions it will not auto play a video unless the video is muted. More information on iOS video standards.
  4. Preload – this helps load the video and give a better user experience of the initial load of the video and playback.
  5. Playsinline – allows the video to play in its original position and not go into fullscreen mode such as on iOS devices, disturbing the user experience of the website.

The poster attribute is a fallback if your video is still downloading. The title attribute is for 508 compliance to describe what the video loop/teaser is about.  It’s also best practice to include a message if your browser does not support videos. Such as the message: “Your browser does not support the video tag”.

Example of an HTML5 video tag setup to autoplay and loop:

Sources: w3schools, WebKit

14 10, 2010

Slick Pop-up Video Player using GreyBox & Flowplayer

By | 2016-11-21T17:56:35+00:00 October 14th, 2010|Categories: Web Development|Tags: , , , , , , , |

Both GreyBox and Flowplayer are free third-party resources for pop-ups windows and online video, respectively.  Combining the two makes a great video player that is easy to maintain and design. Download the source files:

Both will be packaged in ZIP files.  Unpack them and place their contents into their respective directories as shown below:

You will also need to add a folder called ‘videos’ unless you choose to deviate from this tutorial.  Your index file will be a page with the links to the video.  First, open your index file or whatever page you are working with that will display link to the pop-up videos.    These lines of code are required in the <head> tag to get GreyBox to work:

Then, within the body of your document, set up links or image links using this format or similar format found on the GreyBox useage page:

You can set your own title up here or your own popup window size.  All of your anchor tags will refer to the document specified in the ‘href’ attribute, which we will create next.  This prevents us from making a new HTML file for every video you may have on your link page.   Create an HTML file in the same directory as your video links page (index.html in this example) and name it ‘player.html’.  This page will dynamically (using JavaScript) to serve the video based on the filename provided in the links page anchor tag. These lines are needed to get the Flowplayer working within the GreyBox popup:

The dynamic page allows you to just modify your anchor tags ‘href’ attribute in the file that calls the player page.   This page can also be written in ASPX or PHP pages to accomodate your site.  If this is the case, the JavaScript can be replaced with code to get the filename variable from the URL. Your directory should now have a setup like the following:

The index page will look something like this in a browser:

And once the link is clicked, you should get a pop-up player that looks like this: