AdvancedVideo componet issue in Chrome Browser on mobile web

Issueに示されているAdvancedVideoの使用方法から始め、最小構成のNext.jsアプリで最新の@cloudinary/reactおよび@cloudinary/url-genのバージョンに対して動作を検証します。提供された例を大容量の動画でモバイル版ChromeとSafari上でテストします。読み込みの失敗を再現でき、検証済みの解決策によって影響を受ける動画が読み込まれて再生されれば完了です。

Bug report for Cloudinary React SDK

Before proceeding, please update to latest version and test if the issue persists

Describe the bug in a sentence or two.

Using Cloudinary React SDK in a mobile web app (using Next.js) to play large videos. Users have reported that when using Google Chrome Browser on their phones, some videos take a long time to load, while others load indefinitely. This behavior sometimes occurs in Safari on mobile, too, but is primarily noticeable in Chrome on mobile. This issue does not seem to appear on Chrome on desktop. Also, there is no noticeable pattern as to which videos load or don't load. Have checked the Error Logs on the Cloudinary dashboard and there are no related errors.

Describe the desired/expected behavior.

All videos load and play.

Link to reproduction of the issue on codepen/jsfiddle/etc.

import { AdvancedVideo } from "@cloudinary/react";
import { Cloudinary } from "@cloudinary/url-gen";
import { format, quality } from "@cloudinary/url-gen/actions/delivery";
import { scale } from "@cloudinary/url-gen/actions/resize";
import { streamingProfile } from "@cloudinary/url-gen/actions/transcode";
import { auto } from "@cloudinary/url-gen/qualifiers/quality";

interface IVideoPlayerProps {
    publicId?: string;
    id?: string;
    handleOnPlay?: () => void;
    handleOnEnded?: () => void;
    handleOnPause?: () => void;
}

export const VideoPlayer: React.FC<IVideoPlayerProps> = (props: IVideoPlayerProps) => {
    const { publicId, id, handleOnPlay, handleOnEnded, handleOnPause } = props;

    if (!publicId) {
        return null;
    }
    const cld = new Cloudinary({
        cloud: {
            cloudName: "ID"
        }
    });

    const myVideo = cld.video(publicId).resize(scale());

    return (
        <div style={{ width: "90vw", height: "70vh", overflow: "hidden" }}>
            <AdvancedVideo
                id={id}
                cldVid={myVideo}
                controls
                autoPlay
                style={{ width: "100%", height: "100%" }}
                onPlay={handleOnPlay}
                onPause={handleOnPause}
                onEnded={handleOnEnded}
            />
        </div>
    );
};

Issue Type (Can be multiple)

[ ] Build - Can’t install or import the SDK
[ ] Babel - Babel errors or cross browser issues
[x] UI/Performance - Display or performance issues
[ ] Behaviour - Functions aren’t working as expected (Such as generate URL)
[ ] Documentation - Inconsistency between the docs and behaviour
[ ] Incorrect Types - For typescript users who are having problems with our d.ts files
[ ] Other (Specify)

Steps to reproduce

It is unfortunately difficult to repro because the infinite loading is so inconsistent.

Error screenshots

… if applicable

Browsers (if issue relates to UI, else ignore)

[x] Chrome
[ ] Firefox
[x] Safari
[ ] Other (Specify)
[ ] All

Versions and Libraries (fill in the version numbers)

Cloudinary-core - 0.0.0
Cloudinary-react - ^1.13.0
React - ^18
Create-React-App - N/A
Babel - 0.0.0
Webpack/Rollup/Other - 0.0.0
Node - ^20
NPM - 0.0.0

Config Files (Please paste the following files if possible)

Package.json

{
    "name": "atlas-web",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint",
        "format": "prettier --write ."
    },
    "dependencies": {
        "@amplitude/analytics-browser": "^2.5.2",
        "@apollo/client": "^3.9.5",
        "@auth0/auth0-react": "^2.2.4",
        "@cloudinary/react": "^1.13.0",
        "@cloudinary/url-gen": "^1.16.1",
        "@emotion/react": "^11.11.3",
        "@emotion/styled": "^11.11.0",
        "@mui/icons-material": "^5.15.10",
        "@mui/material": "^5.15.10",
        "@sentry/nextjs": "^7.104.0",
        "graphql": "^16.8.1",
        "next": "14.1.0",
        "prettier": "^3.2.5",
        "react": "^18",
        "react-dom": "^18",
        "styled-components": "^6.1.8"
    },
    "devDependencies": {
        "@types/node": "^20",
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "eslint": "^8",
        "eslint-config-next": "14.1.0",
        "typescript": "^5"
    }
}

Webpack.config (if applicable)
Babelrc

Repository

If possible, please provide a link to a reproducible repository that showcases the problem