AdvancedVideo componet issue in Chrome Browser on mobile web

Offen
  • Stimmt etwas nicht?
#263 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Anfängerfreundlichkeit
20/100
Issue-Typ
Bug
Klarheit
Muss geklärt werden
Aktivitätsstatus
Veraltet
Tech-Stack
next.js, react, typescript
Bereich
frontend, performance, web-dev

Rechercherichtung

Beginne mit der im Issue gezeigten Verwendung von AdvancedVideo und überprüfe das Verhalten anhand der neuesten Versionen von @cloudinary/react und @cloudinary/url-gen in einer minimalen Next.js-App. Teste das bereitgestellte Beispiel mit großen Videos in mobilem Chrome und Safari; als abgeschlossen gilt die Aufgabe, wenn der Ladefehler reproduzierbar ist und eine verifizierte Lösung dafür sorgt, dass die betroffenen Videos geladen und abgespielt werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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

Vorherrschende Sprache
JavaScript
Sterne
501
Forks
211
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

  • Kein Dockerfile und keine Docker-Compose-Datei
  • Hat eine Pull-Request-Vorlage
  • Kein Beitragsleitfaden

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus cloudinary/cloudinary-react

Alle Issues in cloudinary/cloudinary-react

Ähnliche Issues

Weitere Issues zu JavaScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.