Html Question posted in
Some basic documentation can be found here.

Html – react.js, video won't play on mobile

I made a react web which has a video as background image. It works on PC but not on mobile, at least not on my iphone. After searching for hours, edited autoplay, playinline etc. in several different ways, nothing changes. On mobile the web only shows an empty background.

I use absolute position and zIndex to make it run as a background image.

My code is as below.


      <video
        id="video"
        width="100%"
        height="100%"
        autoPlay="autoplay"
        playsInLine="playsinline"
        loop="true"
        muted="true"
        style={{
          position: "absolute",
          zIndex: -1,
          opacity: 0.5,
          objectFit: "cover",
        }}
        src={bgv}
        type="video/mp4"
      ></video>
Tags:

2

Answers


  1. 0

    The issue you’re experiencing with the video not playing on mobile devices, especially iPhones, is quite common due to several restrictions and requirements imposed by mobile browsers. Specifically, mobile browsers often require user interaction (like a tap) to start playing media files due to data and battery usage concerns.

    Your code appears correct in terms of attributes, but there are a few adjustments and best practices you should consider:

    1. Boolean Attributes: For autoPlay, playsInLine, loop, and muted attributes, you should use them without values as they are boolean attributes in HTML.

    2. Video Controls: Add a fallback message or consider showing a play button that users can interact with to start the video.

    Your updated code might look something like this:

    <video
  id="video"
  width="100%"
  height="100%"
  autoPlay
  playsInline
  loop
  muted
  style={{
    position: "absolute",
    zIndex: -1,
    opacity: 0.5,
    objectFit: "cover",
  }}
  src={bgv}
  type="video/mp4"
>
  Your browser does not support the video tag.
</video>

    Additionally, you can ensure that the video starts playing when the page loads by adding an event listener in React.

    import React, { useEffect, useRef } from 'react';

const BackgroundVideo = ({ bgv }) => {
  const videoRef = useRef(null);

  useEffect(() => {
    if (videoRef.current) {
      videoRef.current.play().catch((error) => {
        console.error('Error attempting to play', error);
      });
    }
  }, []);

  return (
    <video
      ref={videoRef}
      width="100%"
      height="100%"
      autoPlay
      playsInline
      loop
      muted
      style={{
        position: "absolute",
        zIndex: -1,
        opacity: 0.5,
        objectFit: "cover",
      }}
      src={bgv}
      type="video/mp4"
    >
      Your browser does not support the video tag.
    </video>
  );
};

export default BackgroundVideo;
    Login or Signup to reply.
  2. 0 
    It seems like you're encountering issues with your React web app where the video background is not working correctly on mobile devices, specifically on iPhone. There are a few common issues and considerations when working with video backgrounds on mobile browsers, especially on iOS devices:

Autoplay Restrictions: iOS Safari has restrictions on autoplaying videos. Videos will only autoplay if they meet certain criteria:

The <video> element must be muted (muted="true" in your case).
The <video> element must have the playsinline attribute (playsInline="playsinline" in your case).
The user must have interacted with the website in some way, typically a direct user action like tapping a button.
Correct Attributes: Ensure that you are using the correct attribute names (autoPlay, playsInline, loop, muted). In React, camelCase is used for attributes, so it should be autoPlay, playsInline, loop, and muted without quotes around boolean values.

Safari Specifics: Safari on iOS has had issues with <video> backgrounds in the past. Sometimes, setting the playsinline attribute directly in the HTML might work better than setting it through React.

Testing: Ensure that you are testing on actual iOS devices (iPhone, iPad) rather than relying solely on simulators, as they might not accurately represent the real-world behavior.

Given your code snippet, here are a few adjustments you can try:

<video
  id="video"
  width="100%"
  height="100%"
  autoPlay
  playsInline
  loop
  muted
  style={{
    position: "absolute",
    zIndex: -1,
    opacity: 0.5,
    objectFit: "cover",
    top: 0,
    left: 0,
  }}
>
  <source src={bgv} type="video/mp4" />
  {/* Add more <source> elements for other video formats (e.g., WebM, Ogg) if needed */}
</video>

By following these steps and considerations, you should be able to troubleshoot and resolve the issue with your React video background on iOS devices.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search