There are both advantages and disadvantages to consider when switching all your website’s videos from .mp4 to .webm format:

Advantages:

• Reduced File Size and Faster Loading: WebM uses codecs (VP8 or VP9) designed for efficient web streaming. This translates to smaller file sizes compared to .mp4 with similar video quality. Smaller files lead to faster loading times, improving user experience and website performance.
• Open Format, Encoded Content: Both WebM and MP4 are technically open container formats, meaning their specifications are publicly available. However, the advantage of WebM lies in its codecs.
• Royalty-Free Codecs: WebM uses VP8 or VP9 codecs, which are open-source and royalty-free. This eliminates any potential licensing fees associated with video distribution using WebM.
• MP4 and Licensing: While the MP4 container itself is royalty-free, the codecs used within an MP4 can have licensing fees. Common codecs like H.264 might require licensing for commercial use.
• HTML5 Compatibility: WebM is natively supported by HTML5, the standard markup language for web pages. This simplifies video integration and playback within your website.

Disadvantages:

• Limited Browser Compatibility: While gaining traction, WebM isn’t universally supported like .mp4. Visitors using older browsers might encounter playback issues. Here’s a breakdown of some browsers with limited or no WebM support:
  • Internet Explorer: All versions (IE is no longer supported by Microsoft)
  • Safari: Versions below 11 (released in 2016) on macOS and iOS
  • Older versions of Edge: Versions 12 and 13 (released between 2016-2017)
  • Older versions of Firefox: Versions below 28 (released in 2017)
  • Older versions of Opera: Versions below 16 (released in 2016)
  • Android Browser: Versions below version 5 (released in 2014) on some older devices
• Editing Software Compatibility: Some video editing software might not natively support exporting to WebM. This could introduce additional steps in your workflow if you frequently create and upload videos.
• Device Compatibility: Certain older devices, particularly mobile ones released before 2014, might have issues playing WebM videos.

Mitigating the Drawbacks: Providing Fallbacks with JavaScript

Here’s how you can address the browser compatibility issue by offering MP4 fallbacks using JavaScript:

HTML with WebM Priority:

HTML

<video id="myVideo" width="640" height="480" controls>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

JavaScript for Browser Detection and Fallback (Optional):

JavaScript

<script>
  const videoElement = document.getElementById('myVideo');
  const mp4Source = videoElement.querySelector('source[type="video/mp4"]'); // Get MP4 source

  function checkWebMSupport() {
    if (!videoElement.canPlayType('video/webm')) {
      // WebM not supported, move MP4 source to the beginning for playback
      videoElement.insertBefore(mp4Source, videoElement.firstChild);  
    }
  }

  checkWebMSupport();
</script>

Explanation:

1. HTML:
   • The <video> tag defines the video player with an ID (myVideo) for easier manipulation in JavaScript.
   • We prioritize WebM by listing the WebM source first.
   • The MP4 source acts as a fallback.
2. JavaScript (Optional):
   • This script provides an extra layer of control (optional).
   • It retrieves the video element (videoElement) and the MP4 source element specifically (mp4Source).
   • The checkWebMSupport function uses canPlayType to check for WebM support.
   • If WebM isn’t supported, it moves the mp4Source to the beginning of the video element’s children using insertBefore. This ensures the MP4 source plays if WebM fails.

Remember:

• Upload both WebM and MP4 versions of your videos and update the source paths accordingly.
• Ensure the JavaScript code is included in your HTML file.

This approach allows for wider browser compatibility while keeping your video playback experience smooth.

Are you ready to design & build your own website? Learn more about UltimateWB! We also offer web design packages if you would like your website designed and built for you.

Got a techy/website question? Whether it’s about UltimateWB or another website builder, web hosting, or other aspects of websites, just send in your question in the “Ask David!” form. We will email you when the answer is posted on the UltimateWB “Ask David!” section.