Skip to main content

Using video playlists with the React component

Matthew McGillivray

Hello,

I have been trying to use playlists with the React component, but can't find any reference in the documentation to it. I have been googling around and it seems that the only way to do this is to use the cloudinary core js library, which I have got working. This is causing me a few issues though - as I am using GatsbyJS, the server side rendering fails at build time as the library makes reference to the browser window. As a result I am using loadable components so that this only gets built on the client, which has caused other issues - when I purge unused CSS, this component is not included so I have to manually exclude some styling. Anyway, that is out of the scope of this question, but it is all stemming from the fact that I can't use the React component to view a playlist of videos.

I did try changing the publicId when I wanted the next video to be played, but this didn't seem to be working. Should I have persevered with this method more? I didn't think reloading the whole video component would be a good solution though.

0

Comments

5 comments

Date Votes
  • 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
  • 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
  • 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
  • Adabel Berdina

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

    1
  • Matthew McGillivray

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

    0

Post is closed for comments.

Didn't find what you were looking for?

New post