SimpleHlsVideo

import { SimpleHlsVideo } from '@videojs/react/media/simple-hls-video';

export default function BasicUsage() {
  return (
    <SimpleHlsVideo
      className="simple-hls-video"
      src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
      autoPlay
      muted
      playsInline
      loop
    />
  );
}

.simple-hls-video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

<media-container class="media-container">
    <simple-hls-video
        src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM.m3u8"
        autoplay
        muted
        playsinline
        loop
    ></simple-hls-video>
</media-container>

.media-container {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}

import '@videojs/html/media/container';
import '@videojs/html/media/simple-hls-video';

API Reference

Attributes

Renders a native <video> element and accepts these media attributes as React props. The standard ones behave as described in the MDN media attributes reference: autopictureinpictureautoPlaycontrolscontrolslistcrossOrigindisablepictureinpicturedisableremoteplaybackloadingloopmutedplaysInlineposterpreloadsrc

streamType — The kind of stream being played, detected from the source. One of on-demandlivell-liveunknown

Properties

Also exposes these properties from the native media API. See HTMLMediaElement for details: autoplaybufferedcontrolscrossOrigincurrentSrccurrentTimedefaultMuteddefaultPlaybackRatedisablePictureInPicturedisableRemotePlaybackdurationendederrorloopmutedpausedplaybackRateplayedplaysInlineposterreadyStateremoteseekableseekingtextTrackstitlevideoHeightvideoWidthvolume

In React, access these through a ref to the element.

Methods

Supports these methods from the native media API. See HTMLMediaElement for the core methods: addTextTrackcanPlayTypeexitFullscreenexitPictureInPictureloadpauseplayrequestFullscreenrequestPictureInPicture

In React, call these through a ref to the element.

Events

Handle these media events with React event props (e.g. onPlay, onTimeUpdate). See media events: abortcanplaycanplaythroughdurationchangeemptiedendederrorloadeddataloadedmetadataloadstartpauseplayplayingprogressratechangeresizeseekedseekingstalledsuspendtimeupdatevolumechangewaiting

These media events have no React prop — attach a listener through a ref with addEventListener: addtrackchangeenterpictureinpictureleavepictureinpictureremovetrack

This element dispatches no events beyond the media events above.

CSS Custom Properties