mothermopa.blogg.se - Real time video player

LiveTracker provides several useful helper functions and events for dealing with live playback, all of which are used and tested internally. This API is a child of the player and should be on the player at player.liveTracker. Note: this component can be turned off by passing liveTracker: false to the player during initialization.Īlong with the new liveui we implemented an API that can be used regardless of which user interface is in use. That same button indicates if the currentTime of the player is live via a grey circle when not live and a red circle when live. Next, it adds a button, via the SeekToLive component that can be clicked when the user is behind live that will seek to the live current time. The new live user interface shows the progress/seek bar and lets the user seek backwards/forwards within the live window.

Note: It does this by adding the vjs-live and vjs-liveui class to the player and the showing/hiding of components is all handled in css. Along with the ProgressControl update we also updated all the time tooltips on the player to indicate a negative number from the live current time, rather than seeking to a specific time. The new user interface shows the ProgressControl component on the control bar, hides the LiveDisplay component, and shows the new SeekToLive component when Video.js detects that the video that it is playing is live (via a durationchange event).

If you want to use the new user interface you will have to pass ) We feel that the new user interface is much better and it will likely become the new default in the next major version. The new user interface is currently opt-in to prevent breaking backwards compatibility. We recommend overriding the native hls implementation with this will make the new liveui work. Note: This user interface will not work on Android due to the native live HLS implementation not supporting seekable ranges during live streams.

run npm start to start the local server.

run npm install or npm ci to install all necessary packages.

clone the repository, and move into that directory.

To view a sample of this user interface please: All of those will be shown again if a non-live video is switched to (via another durationchange event). This makes the player have to hide the progress bar, seek bar, and display text indicating that the player is live. Note: It does this by adding the vjs-live class to the player and the showing/hiding of components is all handled in css. The default user interface hides the ProgressControl component on the controlbar and shows the LiveDisplay component when Video.js detects that the video that it is playing is live (via a durationchange event). Note the "old" live user interface is currently the default, see the section on the new user interface for information on setting that up.