本页目录
相关链接常见问题

NativeVideo

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

描述

原生视频播放组件。

属性

属性类型必填默认值说明
srcstring是-要播放视频的资源地址，支持网络路径；注意分区部署情况下视频是否支持访问
durationnumber否-指定视频时长，单位秒
controlsboolean否true是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
autoplayboolean否false是否自动播放
loopboolean否false是否循环播放
mutedboolean否false是否静音播放
initialTimenumber否0指定视频初始播放位置
showFullscreenBtnboolean否true是否显示全屏按钮
showPlayBtnboolean否true是否显示视频底部控制栏的播放按钮
showCenterPlayBtnboolean否true是否显示视频中间的播放按钮
objectFit"contain" | "fill" | "cover" | "none"否contain当视频大小与 video 容器大小不一致时，视频的表现形式
posterstring否-视频封面图资源地址
showMuteBtnboolean否false是否显示静音按钮
borderWidthnumber否0边框的宽度，单位 px
borderStyle"solid" | "dashed"否solid边框的样式，可选值 solid 和 dashed
borderColorstring否#ffffff边框的颜色，必须为十六进制格式
borderRadiusnumber否0边框的圆角，单位 px
borderRadiusTopLeftnumber否-边框的左上角圆角大小，单位 px
borderRadiusTopRightnumber否-边框的右上角圆角大小，单位 px
borderRadiusBottomLeftnumber否-边框的左下角圆角大小，单位 px
borderRadiusBottomRightnumber否-边框的右下角圆角大小，单位 px
backgroundColorstring否#ffffff背景颜色，必须为十六进制格式
否-当开始/继续播放时触发
否-当暂停播放时触发
否-当播放到末尾时触发
否-播放进度变化时触发
否-视频进入和退出全屏时触发
否-视频出现缓冲时触发
否-视频播放出错时触发
否-加载进度变化时触发，只支持一段加载
否-视频元数据加载完成时触发
否-切换 controls 显示隐藏时触发
否-seek 完成时触发
updateLayoutunknown否-用来异层组件通知容器层样式更新

合法值

objectFit
值说明最低版本
contain保持宽高比，完整显示视频，容器可能留白-
fill拉伸视频以填满容器，不保持宽高比-
cover保持宽高比并填满容器，超出部分裁剪-
none保持视频原始尺寸，不进行缩放-
borderStyle
值说明最低版本
solid实线边框-
dashed虚线边框-
NativeVideoFullscreenChangeDetail.direction
值说明最低版本
vertical竖屏方向-
horizontal横屏方向-

示例代码

基础用法

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

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <NativeVideo
        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 { NativeVideo, View } from '@ray-js/ray';

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <NativeVideo
        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={3}
        objectFit="cover"
        showFullscreenBtn
        showPlayBtn
        showCenterPlayBtn={false}
        showMuteBtn
        style={{ width: '100%', height: '200px' }}
        onError={(e) => console.log('播放错误:', e.detail.errMsg)}
        onWaiting={() => console.log('缓冲中')}
        onTimeupdate={(e) => console.log('进度:', e.detail.currentTime, '/', e.detail.duration)}
      />
    </View>
  );
}

自定义边框与事件

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

export default function () {
  return (
    <View style={{ padding: '20px' }}>
      <NativeVideo
        src="https://images.tuyacn.com/rms-static/602542e0-48f8-11f1-95db-cfd3b8132c07-1778036702734.mp4"
        controls
        borderWidth={2}
        borderStyle="dashed"
        borderColor="#1890ff"
        borderRadius={16}
        backgroundColor="#000000"
        style={{ width: '100%', height: '200px' }}
        onPlay={() => console.log('播放')}
        onPause={() => console.log('暂停')}
        onEnded={() => console.log('结束')}
        onFullscreenchange={(e) => console.log('全屏:', e.detail.fullScreen, '方向:', e.detail.direction)}
        onControlstoggle={(e) => console.log('控件显示:', e.detail.show)}
        onProgress={(e) => console.log('缓冲:', e.detail.buffered + '%')}
        onLoadedmetadata={(e) => console.log('元数据:', e.detail.width, 'x', e.detail.height)}
        onSeekcomplete={(e) => console.log('seek:', e.detail.position)}
      />
    </View>
  );
}

相关链接

相关 API: createNativeVideoContext。这是基于异层渲染的原生组件, 请注意 原生组件使用限制。

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

常见问题

  1. native-video 默认宽度 300px、高度 225px，可通过 tyss 设置宽高。
  2. 相关原理请参考 基于异层渲染的原生组件。
  3. 请注意 原生组件使用限制。
  4. native-video 支持的视频格式：MP4（MPEG 4 文件使用 H264 视频编解码器和 AAC 音频编解码器）。