Playing Your First HTML5 Movie
What Does All of This Mean?
Let us look at line one of this code as this will determine how your video appears to your visitor. The very first line of code
Now that you have learned how to play a basic video in HTML5, it is time to learn how to add more functionality through the use of parameters. A ‘parameter’ is an option available to you which specifies a function that will be performed when your video plays.
Using The “Poster” Parameter
The ‘poster’ parameter allows you to load a ‘place holder image’, which is an image that users see before they click ‘play’ on the video. You can use this to provide information on the video or simply provide a generic ‘play button’ for your video instead of the default ‘play’ button that loads with HTML5 videos. Below is an example of how you would load a video using a placeholder.
You will notice that on the first line of code, all you are adding to your original HTML5 video code, from above, is the line:
poster="https://www.yoursite.com/images/video_placeholder.png"
All you have to do, for your video, is replace ‘https://www.yoursite.com’ with the url of your website and make sure that the full url is properly pointing to your placeholder image. Below is a demonstration of a placeholder loading before a movie starts. Please click the graphic below to play the movie.
At this point, you are able to load movies to ensure browser compatibility and you are able to load a placeholder image for your movie before users click on the video to play it. So, how about learning how to autoplay a movie?
Auto Playing Movies
You may wish to have a video play upon page view. To do this, you simply add this parameter to the first line of code:
autoplay="autoplay"
which would lead to the full html5 video code looking like this.
The Autoplay Video Demo:
I did not want to scare you with a movie playing automatically.
Magento Development Lead
