How to Setup a Video Loop or Video Teaser for Desktop and Mobile Devices
Published May 23, 2017 | Categories: Web Development
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.
- Autoplay – to start the video when the video and page loads
- Loop – this allows the video to continue playing. You can define the amount of times or it can be infinite.
- 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.
- Preload – this helps load the video and give a better user experience of the initial load of the video and playback.
- 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:
<video autoplay loop muted preload playsinline poster="/video-example.jpg" title="Video Title">
<source src="/video-example.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>Recent Posts
