RupamDas
Advantage of HTML5 Video over GIF

Advantage of HTML5 Video over GIF

Rupam Das's photo
Rupam Das
·

3 min read

Who doesn't love GIFs in today's generation?

GIFs are the best way to show any limited information to viewers when compared to a simple static image. But this causes problems when the length of GIF increases.

  • The size of GIF increases (to maintain a good quality GIF)

  • In lower networks, until the GIF is fully loaded, it will not play (lags a lot)

A better alternative will be to use HTML 5 video tag because the video plays progressively as it loads.

<video>
    <source src='myVideo.mp4' type='video/mp4'/>
</video>

Thankfully, the HTML5 video tag is supported by most of the browsers. The size of an mp4 video can be up to 85-90% smaller than the same quality GIF.

The size can be further reduced if we use WEBM videos (recommended).

webmSupport.png97% browsers now supports WEBM (image was taken from here)

For the safer side, we can give mp4 as a fallback.

<video>
    <source src='myVideo.webm' type='video/webm'/>
    <source src='myVideo.mp4' type='video/mp4'/>
</video>

HTML5 video tag also gives developers to control the video accordingly using attributes

Listing most useful attributes

  1. autoplay: If added, the video will begin to play automatically. Some browsers may not support this, so it can be used along with the muted attribute.

  2. muted: If added, the video will be initially silenced. If not added, the video will start with audio on.

  3. controls: If added, users will get an option to pause/resume, volume change. If you want a GIF-like experience then this attribute should not be added.

  4. loop: If added, the video will play on a loop just like a GIF.

  5. poster: Requires a URL of an image that should be shown while the video is downloading. This is recommended because, on the lower network, the video takes time to start, in that case a black screen is displayed until the first frame of video is loaded.

You can look for more attributes in the official doc here

So to make a video act like a GIF

video should be

  • autoplaying

  • in a loop

  • muted

  • having no controls (play/pause)

    <video autoplay muted loop poster='myThumbnail.png' id='myVideo'>
 <source src='myVideo.webm' type='video/webm'/>
 <source src='myVideo.mp4' type='video/mp4'/>
</video>

    With these, video will look exactly as a GIF, very hard to distinguish by the viewer

More Benefits

Events

Some useful events are

  1. onplay: It is fired when the video starts playing.
  2. onplaying: It is fired when the video is playing after having been paused or stopped for buffering
  3. onended: It is fired when the video playlist is ended. If loop attribute is present then this event will not fire at all.
  4. onerror: It is fired when an error occurred during loading.
var vid= document.getElementById('myVideo');
vid.play = function() {
    alert("The video has started to play");
};
vid.onerror = function() {
    alert("Error! Something went wrong");
};

Methods

A developer can also control the video on other events such as on any button click.

  1. load(): Re-loads the audio/video element. To play video always from start.
  2. play(): Starts playing the audio/video
  3. pause(): Pauses the currently playing audio/video
var playBtn= document.getElementById("playVideoButton");
var pauseBtn= document.getElementById("pauseVideoButton");

playBtn.addEventListener('click', function () {
    vid.play()
})
pauseBtn.addEventListener('click', function () {
    vid.pause()
})

Conclusion

The HTML5 video tag is one of the best alternatives to GIF according to me. We also have a Youtube Video Player as well, it also has a major benefit that youtube itself adjusts video quality according to network bandwidth. But that has its own disadvantage such as the player having a youtube header and some other restrictions.

Hoping this blog might help someone like me who is working with GIFs for the first time.

HTML5