本页目录
相关链接常见问题Video 默认宽高和格式如何获取视频播放进度？

Video

版本要求:
@ray-js/ray≥1.4.24

描述

视频组件，支持播放控件、弹幕与全屏。

属性

属性类型必填默认值说明
srcstring是-要播放视频的资源地址，支持网络路径
durationnumber否0指定视频时长
controlsboolean否true是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
否-弹幕列表
danmuBtnboolean否false是否显示弹幕按钮，只在初始化时有效，不能动态变更
enableDanmuboolean否false是否展示弹幕，只在初始化时有效，不能动态变更
autoplayboolean否false是否自动播放
loopboolean否false是否循环播放
mutedboolean否false是否静音播放
initialTimenumber否0指定视频初始播放位置
showFullscreenBtnboolean否true是否显示全屏按钮
showPlayBtnboolean否true是否显示视频底部控制栏的播放按钮
showCenterPlayBtnboolean否true是否显示视频中间的播放按钮
objectFit"contain" | "fill" | "cover" | "none"否contain当视频大小与 video 容器大小不一致时，视频的表现形式
posterstring否-视频封面的图片网络资源地址
showMuteBtnboolean否false是否显示静音按钮
autoPauseboolean否true非可视区域是否自动暂停
否-当开始/继续播放时触发
否-当暂停播放时触发
否-当播放到末尾时触发
否-视频出现缓冲时触发
否-视频播放出错时触发
否-加载进度变化时触发，只支持一段加载
否-视频元数据加载完成时触发
否-当浏览器可以播放视频时触发
否-当浏览器可在不因缓冲而停顿的情况下进行播放时触发
否-当视频在已因缓冲而暂停或停止后已就绪时触发
否-当视频的播放速度已更改时触发
否-当音量已更改时触发
否-seek 完成时触发

合法值

objectFit
值说明最低版本
contain保持宽高比，完整显示视频，容器可能留白-
fill拉伸视频以填满容器，不保持宽高比-
cover保持宽高比并填满容器，超出部分裁剪-
none保持视频原始尺寸，不进行缩放-

示例代码

基础用法

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('开始播放')}
        onPause={() => console.log('暂停播放')}
        onEnded={() => console.log('播放结束')}
      />
    </View>
  );
}

播放配置

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('播放错误:', e.detail.errMsg)}
        onWaiting={() => console.log('缓冲中')}
      />
    </View>
  );
}

弹幕与事件

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: '精彩', color: '#ff0000', time: 1 },
          { text: '好看', color: '#00ff00', time: 3 },
          { text: '太棒了', color: '#0000ff', time: 5 },
        ]}
        style={{ width: '100%', height: '200px' }}
        onPlay={() => console.log('开始播放')}
        onPause={() => console.log('暂停')}
        onEnded={() => console.log('播放结束')}
        onProgress={(e) => console.log('缓冲:', e.detail.buffered + '%')}
        onLoadedmetadata={(e) => console.log('元数据:', e.detail.width, 'x', e.detail.height, '时长:', e.detail.duration)}
        onSeekComplete={(e) => console.log('seek 完成:', e.detail.position)}
      />
    </View>
  );
}

相关链接

相关 API: createVideoContext

智能生活 App 扫码体验
下载示例代码

常见问题

Video 默认宽高和格式

  1. video 默认宽度 300px、高度 225px，可通过 tyss 设置宽高。
  2. video 支持三种视频格式：MP4、WebM、Ogg。
    • MP4 = MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器
    • WebM = WebM 文件使用 VP8 视频编解码器和 Vorbis 音频编解码器
    • Ogg = Ogg 文件使用 Theora 视频编解码器和 Vorbis 音频编解码器

如何获取视频播放进度？

可通过onTimeupdate 获取视频播放时长。