On this page
Related LinksFAQDefault width, height, and supported formats of VideoHow do I get the video playback progress?

Video

Requires:
@ray-js/ray≥1.4.24

Description

Video component supporting playback controls, bullet comments, and full screen.

Props

PropertyTypeRequiredDefaultDescription
srcstringYes-Source URL of the video to play; network URLs are supported
durationnumberNo0Specify the video duration
controlsbooleanNotrueWhether to show the default controls (play/pause button, progress, time)
No-Bullet comment list
danmuBtnbooleanNofalseWhether to show the bullet comment button; only effective at initialization and cannot be changed dynamically
enableDanmubooleanNofalseWhether to display bullet comments; only effective at initialization and cannot be changed dynamically
autoplaybooleanNofalseWhether to autoplay
loopbooleanNofalseWhether to loop
mutedbooleanNofalseWhether to mute
initialTimenumberNo0Initial playback position
showFullscreenBtnbooleanNotrueWhether to show the fullscreen button
showPlayBtnbooleanNotrueWhether to show the play button in the bottom control bar
showCenterPlayBtnbooleanNotrueWhether to show the center play button
objectFit"contain" | "fill" | "cover" | "none"NocontainHow the video is fitted when its size differs from the video container
posterstringNo-URL of the video poster image
showMuteBtnbooleanNofalseWhether to show the mute button
autoPausebooleanNotrueWhether to auto-pause when out of the viewport
No-Triggers when playback starts or resumes
No-Triggers when playback is paused
No-Triggers when playback reaches the end
No-Triggers when buffering occurs
No-Triggers on playback error
No-Triggers when load progress changes; only a single segment is supported
No-Triggers when video metadata has loaded
No-Triggered when the browser can play the video
No-Triggered when the browser can play without stalling for buffering
No-Triggered when the video is ready after being paused or stopped due to buffering
No-Triggered when the playback speed changes
No-Triggered when the volume changes
No-Triggers when seek completes

Valid Values

objectFit
ValueDescriptionSince
containPreserve the aspect ratio and display the entire video; the container may have empty space-
fillStretch the video to fill the container without preserving the aspect ratio-
coverPreserve the aspect ratio and fill the container, cropping any overflow-
noneKeep the video's original size without scaling-

Examples

Basic usage

import React from 'react';
import { Video, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Video
        src="https://images.tuyacn.com/rms-static/602542e0-48f8-11f1-95db-cfd3b8132c07-1778036702734.mp4"
        controls
        style={{ width: '100%', height: '200px' }}
        onPlay={() => console.log('Playback started')}
        onPause={() => console.log('Playback paused')}
        onEnded={() => console.log('Playback ended')}
      />
    </View>
  );
}

Playback configuration

import React from 'react';
import { Video, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Video
        src="https://images.tuyacn.com/rms-static/602542e0-48f8-11f1-95db-cfd3b8132c07-1778036702734.mp4"
        poster="https://vjs.zencdn.net/v/oceans.png"
        controls
        autoplay={false}
        loop
        muted
        initialTime={5}
        objectFit="cover"
        showFullscreenBtn
        showPlayBtn
        showCenterPlayBtn={false}
        showMuteBtn
        autoPause
        style={{ width: '100%', height: '200px' }}
        onError={(e) => console.log('Playback error:', e.detail.errMsg)}
        onWaiting={() => console.log('Buffering')}
      />
    </View>
  );
}

Danmaku and events

import React from 'react';
import { Video, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <Video
        src="https://images.tuyacn.com/rms-static/602542e0-48f8-11f1-95db-cfd3b8132c07-1778036702734.mp4"
        controls
        enableDanmu
        danmuBtn
        danmuList={[
          { text: 'Great', color: '#ff0000', time: 1 },
          { text: 'Nice', color: '#00ff00', time: 3 },
          { text: 'Awesome', color: '#0000ff', time: 5 },
        ]}
        style={{ width: '100%', height: '200px' }}
        onPlay={() => console.log('Playback started')}
        onPause={() => console.log('Paused')}
        onEnded={() => console.log('Playback ended')}
        onProgress={(e) => console.log('Buffered:', e.detail.buffered + '%')}
        onLoadedmetadata={(e) => console.log('Metadata:', e.detail.width, 'x', e.detail.height, 'Duration:', e.detail.duration)}
        onSeekComplete={(e) => console.log('Seek complete:', e.detail.position)}
      />
    </View>
  );
}

Related API: createVideoContext

Scan with SmartLife App to Try
Download Sample Code

FAQ

Default width, height, and supported formats of Video

  1. video default width is 300px and height is 225px. You can set the width and height via tyss.
  2. video supports three video formats: MP4, WebM, and Ogg.
    • MP4 = MPEG-4 files using H.264 video codec and AAC audio codec
    • WebM = WebM files using VP8 video codec and Vorbis audio codec
    • Ogg = Ogg files using Theora video codec and Vorbis audio codec

How do I get the video playback progress?

You can use onTimeupdate to get the playback duration of the video.