npm 包 `video-react` 使用教程

阅读时长 8 分钟读完

在前端开发中，视频播放功能非常重要，而 video-react 就是一个基于 React 的视频播放组件。该组件提供了丰富的 API 和自定义样式，使得使用它能轻松地实现视频播放功能。

安装

在使用 video-react 之前，我们需要先安装它。可以通过 npm 来安装，执行以下命令即可：

npm install --save video-react

使用

在安装完成后，我们可以通过如下方式来使用 video-react 组件：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- --------------

----- -------- - ----- -- -
  ------ -
    --------
      ------- -------------------------------------------
    ---------
  --
--

------ ------- ---------

在上面的例子中，我们使用 import 语句引入了 Player 组件，并在组件中放置了一个 source 元素，用于指定要播放的视频 URL。

API

Player 组件

属性

  • aspectRatio：视频宽高比，默认值 '16:9'
  • autoPlay：自动播放视频，默认值 false
  • buffered：视频缓存区间，可以为 Array、TimeRanges 或者是一个字符串，默认值 undefined
  • className：自定义类名，默认值 ''
  • fluid：是否自适应宽度，默认值为 false。若为 true，则将 aspectRatio 属性忽略
  • height：视频高度，可以为整数或字符串，如 '100%'，默认值 undefined
  • loop：是否循环播放，默认值 false
  • muted：是否静音播放，默认值 false
  • onAbort：中止事件
  • onCanPlay：当视频准备好可以播放时触发
  • onCanPlayThrough：当视频可以不间断播放时触发
  • onDurationChange：当视频时长改变时触发
  • onEmptied：当媒体元素变为空（没内容）时触发
  • onEnded：当视频播放完毕时触发
  • onError：视频加载错误时触发
  • onLoadedData：当视频元素准备好被播放时触发
  • onLoadedMetadata：当视频元数据被加载时触发
  • onLoadStart：视频加载开始时触发
  • onPause：视频暂停时触发
  • onPlay：视频开始播放时触发
  • onPlaying：视频正在播放中的时候触发
  • onProgress：提供和视频加载有关信息的事件
  • onRateChange：视频速率改变时触发
  • onSeeked：当视频跳跃的时候触发
  • onSeeking：当视频正在用户进度条跳跃中触发
  • onStalled：视频网速失速时触发
  • onSuspend：视频暂停播放时触发
  • onTimeUpdate：视频更新时间轴时触发
  • onVolumeChange：视频音量变化时触发
  • onWaiting：视频正在缓冲时触发
  • playbackRate：视频播放速度，默认值 1.0
  • playsInline：控制视频是否播放inline，默认值为 true，在 iOS 下设置为 false
  • poster：视频封面图片
  • preload：视频加载模式，可选值为 'auto'、'metadata' 和 'none'，默认值 'auto'
  • src：要播放的视频 URL，可以是一个字符串，也可以是一个列表。URL 内容可以是视频文件，也可以是字幕文件，YouTube 或 Vimeo 等的链接
  • title：视频标题，默认值 undefined
  • volume：音量大小，范围在 0.0 到 1.0 之间，默认值 1.0
  • width：视频宽度，可以为整数或字符串，如 '100%'，默认值 undefined

方法

  • play()：播放视频
  • pause()：暂停视频

BigPlayButton 组件

大播放按钮

属性

  • className：自定义类名，默认值 ''
  • children：自定义子元素，覆盖默认的 SVG 图标元素

ControlBar 组件

控制条组件

属性

  • autoHide：自动隐藏控制条，默认值 true
  • autoHideTime：自动隐藏时间，默认值 3（单位：秒）
  • className：自定义类名，默认值 ''
  • disableDefaultControls：是否显示浏览器默认的 HTML5 视频控制条。当为 true 时，ControlBar 会自动显示
  • disableCompletely：是否完全禁用 ControlBar。当为 true 时，控制条不会显示
  • player：Player 的一个实例。这个属性是必传的
  • currentTimeDisplay：是否显示当前时间，默认值 true
  • durationDisplay：是否显示总时间，默认值 true
  • progressControl：是否显示进度条，默认值 true
  • volumeMenuButton：是否显示音量控制按钮，默认值 true
  • fullscreenControl：是否显示全屏按钮，默认值 true
  • additionalControls：其他自定义控制按钮，可以是数组。例如，我们可以添加一个 ReplayControl 按钮：
-- -------------------- ---- -------
----- ------------- - ----- -- -
  ----- ----------- - -- -- -
    -- ------ ------ -------------
  --

  ------ -
    ------- -------------------- ----------------------
      ------
    ---------
  --
--

----------- ------------------------------------ --

LoadingSpinner 组件

加载动画组件

属性

  • className：自定义类名，默认值 ''

Overlay 组件

覆盖层组件

属性

  • className：自定义类名，默认值 ''
  • onClick：单击事件
  • overlays：自定义覆盖层，可以是一个组件或一个回调函数

例如，我们可以添加一个带有标题的覆盖层：

-- -------------------- ---- -------
----- ------------- - ----- -- -
  ------ -
    ---- ---------------------
      --------------
      ------- -----------
    ------
  --
--

--------
  -------- -------------------------- --
---------

PosterImage 组件

视频海报组件

属性

  • className：自定义类名，默认值 ''
  • style：自定义样式
  • children：自定义子元素

ReplayControl 组件

重新播放组件

属性

  • className：自定义类名，默认值 ''
  • seconds：重新播放的秒数，默认值 10

示例

-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ------- ----------- ---------------------- - ---- --------------
------ ------------------------------------------------------

----- -------- - ----- -- -
  ----- ----- ------- - -------------------------------------------------------
  ----- -------------- ---------------- - --------------

  ------ -
    ------- --------- ----------------------------
      ------------
        ----------------------- ---------- -- ---- -- ----- --------- --
      -------------
    ---------
  --
--

------ ------- ---------

在上面的例子中，我们首先通过 useState 定义了 src 和 playbackRate 两个状态，并在组件中使用了 Player 和 ControlBar 两个主要组件。

此外，我们还设置了播放速度菜单按钮组件 PlaybackRateMenuButton，并将可选的播放速度值传递给了 rates 属性。

总结

在本文中，我们介绍了 video-react 的基本用法、API 和相关组件，并给出了使用示例。video-react 组件提供了丰富的功能和可自定义样式，可以轻松地集成到 React 应用程序中。希望本文能对您学习 video-react 好处。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb3dcb5cbfe1ea06111df

纠错
反馈
相关推荐
精选内容