Using video playlists with the React component

Comments

5 comments

  • Avatar
    Raz Ziv

    Hi Matthew,

    Are you using our Video component, or are you trying to use our video player?

    I think it would be best if you could share your code with us via a direct support ticket at support@cloudinary.com, so we can take a look and advice.

    Best,
    Raz

    0
    Comment actions Permalink
  • Avatar
    Matthew McGillivray

    Sorry for the confusion - I want to use the React Video component, but as I was having issues I switched over to the video player. Here is a codesandbox of my React Video component implementation;

    https://codesandbox.io/s/cloudinary-react-sdk-w-playlist-jns4m?file=/pages/index.js

    In this code, when I press the 'next clip' button, it changes the publicId to be the next video in the playlist array. This has no effect though. What would be the best way to play the next video from an array of IDs? I would really prefer to use the react component.

    0
    Comment actions Permalink
  • Avatar
    Shirly Manor

    Hi Matthew,

    In order to update on publicId change please pass a unique key prop. For example, the key can be the publicId. example: https://stackblitz.com/edit/react-un7exs?file=src/App.js

    This is because our react sdk video component uses the sources attribute of the video element, and HTML standard says that dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect.

    Having said that, we opened a request to our product to change this behavior but there is no ETA yet.

    Hope that helps,

    0
    Comment actions Permalink
  • Avatar
    Adabel Berdina

    I am new to coding and the above is very helpful, thanks very much.

    1
    Comment actions Permalink
  • Avatar
    Matthew McGillivray

    Thanks Shirley that was exactly what I was looking for, legendary!

    0
    Comment actions Permalink

Please sign in to leave a comment.