◦ Only supported by YouTube ( if enabled)Ĭalled when an error occurs whilst attempting to play mediaĬalled when user clicks the light mode previewĬalled when picture-in-picture mode is enabledĬalled when picture-in-picture mode is disabled ◦ Only supported by YouTube, Vimeo ( if enabled), Wistia, and file pathsĬalled when playback quality of the player changed Please set muted=Ĭallback containing duration of the media, in secondsĬalled when media seeks with seconds parameterĬalled when playback rate of the player changed Some players, like Facebook, cannot be unmuted until the user interacts with the video, so you may want to enable controls to allow users to unmute videos themselves. To support IE11 you will need to use babel-polyfill or a similar ES2015+ polyfill.Īs of Chrome 66, videos must be muted in order to play automatically.If you are using npm and need to support browsers without Promise you will need a Promise polyfill.To generate this file yourself, checkout the repo and run npm run build:dist. See the demo source for a full example.įor platforms without direct use of npm modules, a minified version of ReactPlayer is located in dist after installing. Props can be passed in to control playback and react to events such as buffering or media ending. The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources. The Video can be customised using standard CSS techniques.Īll attributes are passed straight through to the HTML.Import React from 'react' import ReactPlayer from 'react-player/lazy' // Lazy load the YouTube player Int duration = await videoRef.GetDurationAsync() Customising the html I would advise always using the async Get/Set methods as they are able to use Asynchronous or Synchronous (under WebAssembly) calls at runtime automatically, while the Properties are Synchronous only. Note: Attempting to read/write Properties from Blazor Server will throw a runtime exception telling you to use the Async versions instead. The component now supports most standard properties directly from C# code. The component now supports four standard methods Methodīool isSupported = await videoRef.CanPlayMediaType("video/webm") public Dictionary VideoEventOptions Calling Standard Methods You are in control of the data sent with every event, if the video element you have on your page has the data, you can request it for any event.Įvent data is requested by supplying a dictionary to the VideoEventOptions parameter. Note: EventCallback events will automatically call StateHasChanged on the parent component, while Action events do not - it is your choice which you use for any event Actionįires when the loading of an audio/video is abortedįires when the browser can start playing the audio/videoįires when the browser can play through the audio/video without stopping for bufferingįires when the duration of the audio/video is changedįires when an error occurred during the loading of an audio/videoįires when the browser has loaded the current frame of the audio/videoįires when the browser has loaded meta data for the audio/videoįires when the browser starts looking for the audio/videoįires when the audio/video has been pausedįires when the audio/video has been started or is no longer pausedįires when the audio/video is playing after having been paused or stopped for bufferingįires when the browser is downloading the audio/videoįires when the playing speed of the audio/video is changedįires when the user is finished moving/skipping to a new position in the audio/videoįires when the user starts moving/skipping to a new position in the audio/videoįires when the browser is trying to get media data, but data is not availableįires when the browser is intentionally not getting media dataįires when the current playback position has changedįires when the video stops because it needs to buffer the next frame This component maps every media event on the video tag using either an Action or an EventCallback - depending on your preference.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |