AdvancedVideo componet issue in Chrome Browser on mobile web

Ouverte
  • Quelque chose ne va pas ?
#263 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
5/5
Temps estimé
Plus d'une semaine
Accessibilité débutants
20/100
Type d'issue
Bug
Clarté
À clarifier
Activité
À l'abandon
Stack technique
next.js, react, typescript
Domaine
frontend, performance, web-dev

Piste de recherche

Commencez par l’utilisation de AdvancedVideo présentée dans l’issue et vérifiez le comportement avec les dernières versions de @cloudinary/react et @cloudinary/url-gen dans une application Next.js minimale. Testez l’exemple fourni avec de grandes vidéos sur Chrome et Safari mobiles ; c’est terminé lorsque l’échec du chargement est reproductible et qu’une résolution vérifiée permet aux vidéos concernées de se charger et d’être lues.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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

Langage dominant
JavaScript
Étoiles
501
Forks
211
Aucune PR mergée en 30 j

Préparer son environnement

  • Aucun Dockerfile ni fichier Docker Compose
  • Propose un modèle de pull request
  • Aucun guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de cloudinary/cloudinary-react

Toutes les issues de cloudinary/cloudinary-react

Issues similaires

Plus d'issues JavaScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.