AdvancedVideo componet issue in Chrome Browser on mobile web

Bắt đầu với cách sử dụng AdvancedVideo được nêu trong issue và xác minh hành vi với các phiên bản mới nhất của @cloudinary/react và @cloudinary/url-gen trong một ứng dụng Next.js tối thiểu. Kiểm thử ví dụ được cung cấp với các video lớn trên Chrome và Safari trên thiết bị di động; được xem là hoàn thành khi lỗi tải có thể tái hiện và một giải pháp đã được xác minh giúp các video bị ảnh hưởng tải và phát được.

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