Solve the compatibility of video playback in mobile browsers: A practical guide to WebM format with Next.js as an example

This article discusses in depth the problem that mobile browsers (such as Safari, Firefox, Chrome) cannot play, but displays normally on the desktop in Next.js applications. By analyzing common causes and providing solutions based on WebM video formats, we aim to help developers optimize their mobile video playback experience, ensure cross-platform compatibility, and avoid display abnormalities caused by improper video encoding or container format.

Challenges of mobile video playback

In web development, especially on mobile devices, video playback often faces many challenges. Although desktop browsers usually have a high tolerance for various video formats and automatic playback strategies, mobile browsers have stricter restrictions on automatic playback, inline playback and supported video formats in order to save user traffic, battery power and improve user experience. A common manifestation is that even if the autoPlay, muted and playsInline properties are set in the HTML

1. Autoplay strategy: Most mobile browsers prohibit automatic playback of videos without user interaction by default, and even mute may be restricted. The playsInline property is intended to allow videos to be played within the element box, not in full screen, but this does not guarantee automatic playback.
2. Video encoding and container format compatibility: Different browsers and operating systems support video encoding (such as H.264, VP8, VP9, AV1) and container formats (such as MP4, WebM, Ogg). Some formats perform well on the desktop, but there may be compatibility issues on specific mobile browsers.
3. MIME type configuration: The server does not correctly configure the MIME type of the video file, which may cause the browser to not recognize the file type and thus cannot play.

WebM format: the preferred solution for mobile video playback

In response to the above compatibility issues, especially playback exceptions caused by video formats, WebM format provides an efficient and widely supported solution. WebM is an open, royalty-free video file format, its video streams are usually encoded in VP8 or VP9, and the audio streams are encoded in Vorbis or Opus. Compared with traditional MP4 (H.264), WebM has better compatibility and performance on modern browsers and mobile devices, especially natively supported on Google Chrome, Mozilla Firefox, and most Android devices. For iOS Safari, it has also been supported since iOS 15, further expanding its coverage.

When encountering the problem that the video is normal on the desktop but cannot be played on the mobile side (including the mobile versions of Safari, Firefox, and Chrome), converting the video source file to WebM format and ensuring correct references can often effectively solve the problem.

Practical Guide: Integrating WebM Videos in Next.js Applications

The following are the specific steps and example codes for using WebM video to solve mobile compatibility problems in Next.js application:

1. Prepare WebM format videos

First, make sure your video file is in WebM format. If the current video is in MP4 or other format, you can use a video conversion tool (such as FFmpeg) to convert it.

Convert video to WebM using FFmpeg (sample command):

 ffmpeg -i input.mp4 -c:v libvpx-vp9 -crf 30 -b:v 0 -b:a 128k -c:a libopus output.webm

• -i input.mp4: Specify the input file.
• -c:v libvpx-vp9: Specify the video encoder as VP9.
• -crf 30: Controls the video quality, the smaller the value, the higher the quality (the larger the file).
• -b:v 0: Enable variable bit rate.
• -b:a 128k: Specify the audio bit rate.
• -c:a libopus: Specify the audio encoder to Opus.
• output.webm: Specifies the output WebM file name.

2. Use the

Place the converted WebM video file in the public directory of the Next.js project. For example, if the file is named header-video.webm, you can place it in public/videos/header-video.webm.

Then, in your React component, use the standard HTML5

 // components/HeaderVideo.jsx
import React from 'react';

const HeaderVideo = () => {
  Return (
    <div classname="absolute left-0 top-0 w-full h-full -z-20">
      <video id="background-video" autoplay playsinline loop muted preload="auto" videos to improve user experience classname="w-full h-full object-cover">
        <source src="/videos/header-video.webm" note: in next.js the files public directory access type="video/webm" through root path></source>
        {/* Recommended: Provide MP4 as an alternative source to compatible with older browsers that do not support WebM*/}
        {/* <source src="/videos/header-video.mp4" type="video/mp4"></source> */}
        Your browser does not support video playback.
      </video>
    </div>
  );
};

export default HeaderVideo;

Code explanation:

• id="background-video": Provides a unique ID for video elements.
• autoPlay: Try to play videos automatically. On mobile, this usually needs to be used in conjunction with muted.
• playsInline: Make sure the video is played within the element box instead of automatically entering full screen mode. This is especially important for background videos.
• loop: Automatic loop after video playback is finished.
• muted: Video playback silently. On mobile, the autoPlay attribute usually takes effect only when the video is muted.
• preload="auto": Tells the browser that the entire video can be preloaded to reduce playback delay. For background videos, this is usually desirable.
• className="w-full h-full object-cover": Tailwind CSS class to ensure that the video fills its parent container and maintains aspect ratio.
• : Specify the video source in WebM format. The src path should be relative to the public directory root path of Next.js.
• Multi-source strategy: Although WebM solves specific problems, to maximize compatibility, it is recommended to provide multiple video formats (such as WebM and MP4) as child elements of the tag. The browser will select the first source it supports for playback.

3. Precautions and best practices

• Path reference: In Next.js, static resources placed in the public directory can be accessed directly through the root path /, such as /videos/header-video.webm. Do not use the relative path ./videos/header-video.webm, which can cause problems in some cases.
• MIME type: Make sure your web server (such as Vercel, Nginx, Apache, etc.) provides the correct MIME type (video/webm) for the .webm file. Most modern hosting services are configured by default.
• Performance optimization:
  • Video compression: Ensure that the video file size is reasonable. Excessively large video files will increase the loading time and affect the user experience.
  • Lazy Loading: For non-first-screen videos, you can consider using the Intersection Observer API or third-party libraries to achieve lazy loading.
  • Placeholder: Display a placeholder image or animation before the video is loaded to avoid content jumping.
• User experience: Even for background videos, you should consider providing play/pause buttons or volume controls to meet user needs and improve accessibility.
• SSR/SSG and client:

Summarize

In Next.js applications, the core is to understand the limitations of mobile browsers and choose appropriate video formats. As an efficient and compatible video format, WebM is an effective way to solve such problems. By converting videos to WebM format, combined with the correct HTML5

The above is the detailed content of Solve the compatibility of video playback in mobile browsers: A practical guide to WebM format with Next.js as an example. For more information, please follow other related articles on the PHP Chinese website!