The code behind the magic: the <video> tag
Whenever you see a video playing on the web, you can thank the venerable <video> tag. Introduced with HTML5 in 2008, it has been supported in browsers going back to Internet Explorer 9. In this post, we'll walk through some common attributes and uses of the video tag, from short videos to video streams.
When you use api.video, the video player that plays the stream still uses the video tag. If we look at the source of the webpage that uses an api.video player link, we see, deep in the recesses of the divs, the <video> tag.
The basics
<video src="myVideo.mp4">
</video>
You can begin building your video playback with the simple video tag, as above. However, there are many attributes that you can add to your video to improve the experience for your customers. let's look at the most commonly used attributes, and then build some demonstrations:
- Controls: Play, pause and the playback bar. Great for many cases, but also nice to be able to hide by omitting this attribute.
- Autoplay: Does what it says. With this attribute, you are telling the browser to autoplay the video. NOTE: most browsers have further rubrics to decide whether or not to autoplay. Desktop browsers typically require interaction on the page. See the next for mobile.
- Muted: Starts the video without audio. This is required for autoplay to work on mobile.
- Loop: At the end of the video, it starts over again at the beginning.
- Height: The height of the video
- Width: Sets the width of the video
- playsinline: denotes that the video can be played 'in place' and does not need to go full screen.
- poster: A URL for the image that appears before the video starts playing. Without a poster, the first frame of the video will be displayed.
- preload: Prelaod has 3 options: none, metadata, auto.
- Preload=none: Download Zero bytes of the video before the play button is pressed
- preload=metadata: (this is the default setting) Downloads a small percentage of the video no page load.
- preload=auto: Tells the browser to download the entire video. Some browsers take this very literally. Others download a much larger percentage than metadata.
- src The URL of the video to be played back.
With these combinations of attributes, there are a multitude of ways you can place videos on your webpage.
Video recipes
Let's play with some of the attributes above. In all of these samples, I've set the height attribute to 400 to keep the length of the post reasonable...
With and without controls
<video src="https://cdn.api.video/vod/vi36GGvd6PoTqViQLxBWwHjJ/mp4/1080/source.mp4" controls height=400></video>
Without controls, your video becomes a very large image. Don't do this:
<video src="https://cdn.api.video/vod/vi36GGvd6PoTqViQLxBWwHjJ/mp4/1080/source.mp4" height=400></video>
Autoplay and muted
This video has autoplay turned on, and it might play in your browser (it will if you have watched other videos on api.video). Each browser has specific rules for a video to autoplay. The safest bet is to add the muted attribute.
<video src="https://cdn.api.video/vod/vi36GGvd6PoTqViQLxBWwHjJ/mp4/1080/source.mp4" autoplay height=400></video>
--- video reomved becuase no one likes video with audio autoplaying ---
The muted attribute along with autoplay will autoplay in all browsers. Of course, the video will be muted.
<video src="https://cdn.api.video/vod/vi36GGvd6PoTqViQLxBWwHjJ/mp4/1080/source.mp4" autoplay muted height=400></video>
Loop
The following video will autoplay, is muted, and will loop. If you think about it - that's basically an animated GIF. In fact, mosta pps (Twitter, Facebook, Slack, even Giphy) use videos with these attributes to deliver the "gif experience."
<video src="https://cdn.api.video/vod/vi36GGvd6PoTqViQLxBWwHjJ/mp4/1080/source.mp4" autoplay muted loop height=400></video>
Poster
For silliness, I'll put a poster of my Twitter avatar in front of the cloud video. I also added controls to allow you to see the video play and the poster disappear.
<video poster="https://pbs.twimg.com/profile_images/1249624047329193984/LloPXdBw_400x400.jpg" src="https://cdn.api.video/vod/vi36GGvd6PoTqViQLxBWwHjJ/mp4/1080/source.mp4" controls height=400></video>
Preload
In my final example, let's load three videos with preload = "none", "metadata" and "auto".
preload=none: Since I did not specify the width, or any other data, you get a black box, with no info about the video. There is no video downloaded (the progress bar is a thin line).
preload=metadata: With the small amount of video data delivered, video is now correctly sized, and the duration appears. If you look at the progress bar, there is a thick gray line showing partial download under the play button (that percentage of the bar shows the amount of video downloaded and ready to play).
preload=auto: The entire video is downloaded, as evidenced by the thick gray line completely across the bottom of the video.
Conclusion
These are the most commonly used attributes in the video tag. In future posts, we'll look at some of the advanced attributes and the Events that can be called to control your videos.
