cloudflare / stream-react Goto Github PK

Hi,

if you specify the signed url in src -- the manifest file is simply downloaded by Chrome and the player does nothing. Is this a bug or am I doing something wrong?

Hello,

I wanted to use your stream component and extends it with some plugin.
To do that, I would need to get access to the player object.
With the props streamRef, I know I can get the dom element but I don't see how i could get him then use him afterward.

Thanks for the component by te way.

Hello Cloudflare team

I am currently customizing the control part of the player, and I am facing an issue where the playbackRate property is not recognized as part of the StreamPlayerApi type

However, when I print out the instance of StreamPlayerApi, it does show that playbackRate exists

I would appreciate it if you could modify the type definition to include this property!

It would be great if there was a way to set captions of a specific language to be enabled by default.

Hello Cloudflare team,

Changing tracks while abr manager is enabled will likely result in the selected track being overriden. Consider disabling abr before calling selectVariantTrack().

I get a warning in the console for every video

Is there any way we can try the new version of the player?

Hi,

The customerCode prop doesn't seem to be documented anywhere. I assume it should be in the list of required props, but it's not. I mean, it's surely a crucial thing to document, since without it how could the component ever build the final url?

Thanks

Hello all,

I'm using your player but I needed to create custom controls for it, and I'm a bit stuck with a full-screen (resize) button. I'm looking at the documentation and I only see width and height for resizing the video.

I have also poke around the code and I saw this part using the resize event.

  useEvent("resize", ref, () => {
    if (ref.current) {
      const { videoHeight, videoWidth } = ref.current;
      setVideoDimensions({ videoHeight, videoWidth });
      onResize && onResize();
    }
  });

Is this is the event for resizing the video? What will be the preferred way of doing this?

I have created a sandbox with some of the controls and I have added simple styling (sorry for poor CSS styling here 😄 ).

Cheers

Seeking to the same timestamp by setting currentTime only works the first time.

Reproduction:

const Player = ({url}) => {
  const [seekTime, setSeekTime] = React.useState<number>(0)

  return (
    <>
      <button onClick={() => setSeekTime(33)}>Seek</button>
      <Stream src={url} currentTime={seekTime} />
    </>
  )
}

Clicking the button the first time seeks, but clicking it a second time (with the video playing) has no effect. I can work around this by setting the currentTime twice (delaying the second using a timeout):

const seek = React.useCallback(
  (seekTo: number) => {
    setSeekTime(undefined)
    setTimeout(() => setSeekTime(seekTo), 1)
  },
  [setSeekTime]
)

As a side note, are the notes for the currentTime prop correct? It says

Returns the current playback time in seconds.

which I don't think is right?

Hello Cloudflare team,

We have a use case where we are using an external 'video picker' list to select a video they want to watch.

Once they click it, we update the props going to the <Stream> component, including the src and poster props.

The src prop seems to take effect, because starting the video does in fact play the selected video, however the poster does not change.

It looks like it's an intended behavior due to the useMemo implementation without dependencies here:

Which says you can use the SDK to make the changes... but I don't see how.

Thanks in advance - we're hoping to switch to Stream from a competitor but this is blocking our implementation :)

When I use adUrl to load a VAST video, I lose the ability to pause or otherwise control it.

https://codesandbox.io/s/elated-nightingale-zy178?file=/src/App.tsx

Is this a VAST issue? Or is it something stream-react is failing at...?

On Mac OS + Chrome, for some users the player automatically pauses after 1-2 seconds of playback without any user interaction. The video does the same thing after seeking and seems to get stuck if the user seeks beyond what has been buffered. No JS errors appear in the console.

Opening the page in an incognito window or restarting the browser seems to help but this has happened to multiple people so it seems to be more than just a fluke. Might this be a sessionStorage issue?

Here's a video of the issue.

We're using stream-react 1.2.0.

When i'm using the default setup and enter fullscreen and then closes fullscreen the video is magically disappeared. I can still hear the sound.

Mac and chrome.

Currently, there does not seem to be a solution for filling the whole player viewport with the video provided (known as cover). The <video/> element cannot be styled since it's loaded in the <iframe/>.

I have a commit ready to be merged.

master...supachaidev:stream-react:add-customer-code-prop

This change makes it easy to pass a customer code to the Stream component to use a unique subdomain for iframe source.

Please review and merge it.

Thank you.

HI, when setting the height and the width in the player

 <Stream
          streamRef={ref}
          src={item.videoId}
          autoplay={true}
          muted={mute}
          controls={false}
          loop={true}
          onCanPlay={() => setPlaceHolder(false)}
          height="720"
          width="1280"
/>

the values don't seem to effect the size of the actual iframe thats rendered
while this is working when using the iframe directly, without using the react component

<iframe
        title="baba"
        src="https://iframe.videodelivery.net/3dc082cc5149aea41970edec72544bca?muted=true&preload=true&loop=true&autoplay=true&controls=false"
        style={{
          border: "none",
          position: "",
          top: "0",
          height: "100vh",
          width: "100vh",
        }}
        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
        allowfullscreen="true"
      ></iframe> 

this will actually adapt the size of the iframe

Hey everyone,

I'm unable to server-side render any apps that imports Stream because an error gets thrown: document is not defined. Looking into the source code, there's a line referring to global namespace, document, with no validation to check if global namespace document exists:
var scriptLocation = "https://embed.videodelivery.net/embed/r4xu.fla9.latest.js"; var streamScript = /*#__PURE__*/document.querySelector("script[src=\"" + scriptLocation + "\"]");

Ideally, I'd like to use the react module in my codebase as it is cleaner, but do you recommend I use the <iframe> code snippet in the app code instead of this module for SSR compatibility? Thanks in advance

When using responsive I get 1px black borders at certain page widths:

I presume setting letterboxColor="white" would solve this, but I don't see that param supported in this lib. Can we add it in?

Hi 👋

Thanks for all your work on creating this React wrapper - much appreciated!

I've seen this post in the Cloudflare forum:

Major Stream Player changes rolling out Aug 3, 2020

Hello! I work on the Stream team and I wanted to share an upcoming Stream Player change that could impact developers who may be making customizations to the player DOM elements.

You can stop reading if you aren’t making changes to the contents of the element or if you only use the official player API 68. Similarly, if you use the official React or Angular components, this change will not affect you.
https://community.cloudflare.com/t/major-stream-player-changes-rolling-out-aug-3-2020/189844

and noticed that stream-react still uses:

While the forum post speaks about: 3f8m.fla9.latest.js as the preview build, is there a specific reason why r4xu.fla9.latest.js is used instead of sdk.latest.js?

On the same note, would be great if the Player would also be open sourced. This would make the version numbers more obvious and allow people to contribute to it :)

Cheers

We found that on a large application, if react rerenders 3-7 times just after page load and the videoId changes inbetween, the player shows an unknown error message and continues to do so every time you change the videoId after that
this means that there's no way to recover from an error like this without unmounting the component and remounting it which isn't really a good solution

I created a reproducable repo here https://github.com/Floffah/cloudflare-stream-error and deployed it so you can test
Make sure to set your network tab to a slightly slower network throttling setting (e.g. Fast 3G)

Hi everyone,

sorry I this post doesn't meet the standards or patterns. I just developed my signed urls and everything works as expected but the endpoint https://videodelivery.net/2fa5ec943c53ac2928b511fea95abff2/metadata/playerEnhancementInfo.json response me with 401 status code.

What can be the cause of this? Should I be concerned? I would like free errors platform (hehe)

Thanks for all team!

I've embedded the stream-react component into a React application in the following way:

<Stream
  preload
  controls
  streamRef={streamPlayerRef}
  src={myVideoID}
  onEnded={(event) => console.log(event)} // does not fire after the video finishes
  onTimeUpdate={(event) => console.log(event)} // other events work fine such as 'onTimeUpdate'
/>

And while I can play videos just fine, any onEnded event is not firing after finishing a video - and despite the fact that I can see the event handler registered to the DOM element. Instead, I see an endless loop of failed requests with a status code 404 in the dev console + my previous video being blacked out with a loading spinner on the top:

GET https://videodelivery.net/<redacted>/video/240/seg_497.ts?p=<redacted>&s=<redacted>
GET https://videodelivery.net/<redacted>/video/360/seg_497.ts?p=<redacted>&s=<redacted>
GET https://videodelivery.net/<redacted>/video/480/seg_497.ts?p=<redacted>&s=<redacted>
GET https://videodelivery.net/<redacted>/video/720/seg_497.ts?p=<redacted>&s=<redacted>

When I then look at the streamPlayerRef, I notice the following after finishing the video:

Question: is this a bug with the stream-react wrapper or does it perhaps have anything to do with using the free tier?

My environment:

"@cloudflare/stream-react": "^0.1.5",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.4",

node: v15.0.1
npm: 6.14.8

In Chrome the Fullscreen button is always disabled if I add the stream with:

<Stream
    controls
    src="videoId"
    poster="/images/video_thumbnail.jpg"
   onEnded={videoEndedListener}
/>

Firefox and Safari work as expected.

Hello Cloudflare Team,

I am experiencing an issue with the @cloudflare/stream-react library, specifically regarding video playback in the LINE app's in-app browser on Android devices.

Issue Description

The videos streamed using the @cloudflare/stream-react library fail to play only in the LINE in-app browser on Android.
These videos work perfectly on other platforms and browsers, including the LINE app on iOS.
No similar issues are observed in browsers like Chrome or Firefox on Android.

I would appreciate any insights, advice, or potential solutions you might have regarding this problem. Is there a known issue with Cloudflare Stream in LINE's in-app browser on Android, or are there specific settings I should consider?

Thank you for your assistance and looking forward to a resolution.

Hey CF team – we're using @cloudflare/stream-react and we're seeing odd behavior on a handful of iOS/iPhone devices (we've tested a few).

The SVG play icon does not consistently load on iOS. When testing on other devices, e.g. Chrome w/ iOS emulator, it loads just fine. Not sure if this is an SVG rendering bug, but I did notice if I leave Safari iOS for a 10-15 seconds and come back, it eventually displays (long after initial pageload).

Here is a link to an example for easy repro:
https://get.doordash.com/en-us/products/merchant-portal#4SQyxBHt6fZliIluzKZOQw

Thanks in advance!

Currently, there is a possibility to autoplay a muted video with a captions track shown. However, there is no way to, for instance, hide those captions if user disables muted.

Since the video is behind and iframe, there is no way to access to the tracks and hide them using something like

videoRef.textTracks[0].mode = 'hidden'

We'd like to show the video controls by default when a user enters the page with the video on it and not only on mouseover.

Also, for our non-technical users the video resolution and cogwheel button may be confusing and an option to hide them altogether e.g. via the player properties would be great.

We have a home spun version of the video client because we need support for closed captioning (specifically .vtt files). Is this feature planned for the official client?

I use this component to load the player but the video does not load as expected. The component has an iframe linked to https://embed.videodelivery.net/embed/iframe.fla9.d42d30f.html?videoId=VIDEO_ID. Accessing the URL directly also resulted in blank white page.

This is the code I use to load the video

<Stream src={VIDEO_ID} width="100%" height="100%"></Stream>

Hello 👋 ! We've been using the @cloudflare/stream-react package and observed some videos which triggered the onError prop:

https://github.com/cloudflare/stream-react/blob/master/src/types.ts#L211-L214

How can we introspect what the error is? The onError function does not seem to communicate what the error is, is there another mechanism for us to understand what went wrong?

Any milestone to make this work with react native?

name: feature-request
about: Use this template to request new features.
title: 'Feature request'
labels: feature-request

Hello,
Quick question, how to hide this loader icon? I read the docs but I didn't find what I was looking for.

Thanks! :)

Hello Cloudflare team,

I've encountered a problem using this library. Ref's don't work as expected. It has value, but the properties are 0 and actions like pause or play don't affect the player. Here is a working demo.
next 13.4.12
react 18.2
@cloudflare/stream-react 1.8

Could you please have a look into this issue?

So I'm using the Stream component in a straightforward way, here's a simplified version:

export default function ({ videoId }) {
  const streamRef = useRef<StreamPlayerApi>();
  const [volume, setVolume] = useState(100);

  return (
    <Stream
            src={videoId}
            streamRef={streamRef}
            currentTime={currentTime}
            volume={volume / 100}
            onLoadedData={(e) => console.log("onLoadedData", e)}
            onDurationChange={(e) => console.log("onDurationChange", e)}
            onLoadedMetaData={(e) => console.log("onLoadedMetaData", e)}
        />
  );
}

So I would like to have a way to access the duration of the video, either from the StreamPlayerApi, as for the volume, or as props from the LoadedMetaData or DurationChange events.
Is it possible?

Hi Cloudflare Team,

Thank you so much for the great plugin! I really appreciate that this plugin works great out of the box. However, I would like to suggest adding the streamRef attribute as part of the documentation. This would be really helpful for future devs who would like to access the stream reference.

Once again, thanks so much!

It would be awesome if we could natively load the m3u8 in the player which is provided by cloudflare instead of using it via the Iframe, the react component doesn't make much sense if EOD we are gonna just embed the iframe.

Thanks!

Any milestone to make this work with react native?

The rendered iframe of the video component doesn't currently contain a title. It would be good to at a minimum expose a title property that can be set for accessibility.

<iframe
        ref={iframeRef}
        src={iframeSrc}
        style={responsive ? responsiveIframeStyles : undefined}
        frameBorder={0}
        height={height}
        width={width}
        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
        allowFullScreen
      />

Hi, I have a Video that is only available for specific domains and which I don't have access to. For local development, I receive a 403 error because localhost is not whitelisted. If this happens, I want to skip the view and move to next. But no EventListener is triggered when this happens. I tried the following ones:

• onAbort
• onError
• onStalled
• onSuspend

Is there another way to handle this error? Tested on Chrome.

I've noticed that I am unable to get video thumbnails to load without having the preload property set to at least metadata. With the metadata value, the thumbnail is loaded but a chunk of the video is also loaded causing unnecessary loading.

When using an iframe based include, this does not appear to happen. See the code below. This loads the thumbnail, and does not load any of the video until the user clicks play.

Is there a way to get this result using the stream component?

<div style={{ position: 'relative', paddingTop: '56.25%' }}>
        <iframe
          src={
            'https://iframe.videodelivery.net/' +
            props.cfStreamId +
            '?preload=none'
          }
          title='Video'
          style={{
            border: 'none',
            position: 'absolute',
            top: '0',
            height: '100%',
            width: '100%',
            left: '0',
          }}
          allow='accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen'
        ></iframe>
</div>

Thank you!

I have a div that contains a Stream component, I set the height of the div to 240px for mobile screens and 480px for large screens. The Stream component is rendered perfectly fit inside the div for large screens, but its height goes full screen for mobile screens (I tested on Chrome and Safari and they both have the same result). My question is how can we make the Stream height fit inside a div for mobile screens? Any suggestion?

We are using navigation between videos and the poster is not updating when navigating from one to another. The poster shown is always the first. I've prepared a codesandbox to reproduce it:

https://codesandbox.io/s/ecstatic-swartz-oygzj

I have tested the following plugin successfully with Gatsbyjs and Nextjs but unfortunately the plugin showing errors when using with Remix Run framework. The error only occur when I use Chrome Browser while click on fullscreen mode. Somehow other browsers such as Safari and Firefox no issues with fullscreen mode.

The error on chrome browser:
HTMLVideoElement.webkitEnterFullscreen() is deprecated. Please use Element.requestFullscreen() instead.

Some workaround and guide is appreciated.

Thank you,

Component is very good and suitable as out-of-the-box solution but there is a little bug that worsens UX. When I start to play live stream big play button is still on the screen even after clicking "play". It disappears after video starting. This bug is reproduced on Chrome and Firefox(mac os). In Safari everything is ok - after clicking play loader is shown.

I have a situation where I have the player wrapped in a parent div that the user can toggle full screen on, as in, not by using the fullscreen button in the player itself. This is so that other elements can be included in fullscreen mode. The lib I'm using for this is https://www.npmjs.com/package/react-full-screen.

The problem is that the aspect ratio doesn't get updated correctly which results in the video getting cut off on large screens.

It looks to be because of the padding-top on the iframe wrapper div.