视频 反应播放器组件

视频 是产品制造者的视频基础设施。 闪电快视频 API 用于在您的应用程序中集成,缩放,并管理点播后低空直播功能.

目录

• 目录
• 项目说明
• 开始
  • 安装
  • 基本用途
• 文档
  • 属性
    • 设置
      • 控件
      • 玩家主题
      • 广告
      • 反应
    • 回电
  • 方法
  • 使用大小写
    • 私人录像
    • 定义元数据
    • 定义自己的控制

项目说明

官方 api.video React Player 组件.

开始

安装

$ npm install --save @api.video/react-player

基本用途

然后您可以使用您的应用程序中的组件 :

import ApiVideoPlayer from "@api.video/react-player";

// ...

<ApiVideoPlayer
  video={{ id: "vi5fv44Hol1jFrCovyktAJS9" }}
  style={{ height: "480px" }}
/>;

文档

属性

设置

以下属性用于配置玩家. 每一个属性的值可以在回放期间随时被更改.

控件

这个 controls 属性允许您在玩家上显示 wich 控件。 以下是所有可用控件列表: play, (中文(简体) ), seekBackward, (中文(简体) ), seekForward, (中文(简体) ), playbackRate, (中文(简体) ), volume, (中文(简体) ), fullscreen, (中文(简体) ), subtitles, (中文(简体) ), chapters, (中文(简体) ), pictureInPicture, (中文(简体) ), progressBar, (中文(简体) ), chromecast, (中文(简体) ), download, (中文(简体) ), more。 。 。 .

实例

{
  /* default: all controls are displayed */
}
<ApiVideoPlayer
  video={{ id: "vi5fv44Hol1jFrCovyktAJS9" }}
  style={{ height: "480px" }}
/>;

{
  /* all controls hidden (equivalent to chromeless=true) */
}
<ApiVideoPlayer
  video={{ id: "vi5fv44Hol1jFrCovyktAJS9" }}
  style={{ height: "480px" }}
  controls={[]}
/>;

{
  /* only the play button & the unmute one are displayed */
}
<ApiVideoPlayer
  video={{ id: "vi5fv44Hol1jFrCovyktAJS9" }}
  style={{ height: "480px" }}
  controls={["play", "unmute"]}
/>;

玩家主题

这个 theme 属性允许您自定义玩家上某些元素的颜色。 以下是可定制元素列表: text, (中文(简体) ), link, (中文(简体) ), linkHover, (中文(简体) ), trackPlayed, (中文(简体) ), trackUnplayed, (中文(简体) ), trackBackground, (中文(简体) ), backgroundTop, (中文(简体) ), backgroundBottom, (中文(简体) ), backgroundText, (中文(简体) ), linkActive。 。 。 .

示例

{
  /* display the text in blue and the progress bar in red */
}
<ApiVideoPlayer
  video={{ id: "vi5fv44Hol1jFrCovyktAJS9" }}
  style={{ height: "480px" }}
  theme={{
    trackPlayed: "#FF0000",
    text: "blue",
  }}
/>;

广告

广告可以在玩家中显示. 要做到这一点,你需要通过 ads 选项。 在那个 ads 对象,通过 adTagUrl 带有广告标签url的属性。 广告标签必须是VAST 2.0或 3.0 url. 有关VAST的更多信息,请查看 IAB 文件。 。 。 .

注:广告使用 谷歌IMA SDK。 。 。 .

反应

与 responsive={true},玩家高度会根据玩家的宽度,自动设定视频与/高比相匹配.

示例

{
  /* the player width is 160px and response is true: if the video in a 16/9 one, the height of the player will be automatically set to 90px (160 / (16/9)) */
}
<ApiVideoPlayer
  video={{ id: "vi5fv44Hol1jFrCovyktAJS9" }}
  style={{ width: "160px" }}
  responsive={true}
/>;

回电

方法

使用大小写

私人录像

来玩一个 私人视频,在视频属性中添加视频视图符:

// ...
<ApiVideoPlayer
  video={{
    id: "vi5fv44Hol1jFrCovyktAJS9",
    token: "e1bdf9a8-da40-421e-87f3-75b15232c531",
  }}
  style={{ height: "480px" }}
/>

定义元数据

// ...
<ApiVideoPlayer
  video={{ id: "vi5fv44Hol1jFrCovyktAJS9" }}
  style={{ height: "480px" }}
  metadata={{ userName: "Alfred" }}
/>

定义自己的控制

const playerRef = useRef<ApiVideoPlayerRef>(null);

return;
<ApiVideoPlayer
  video={{ id: "vi5jC9kQs2I3PdmVBjgcIg45" }}
  style={{ height: "480px" }}
  chromeless={true}
  ref={playerRef}
>
  <button onClick={() => playerRef.current?.play()}>play</button>
  <button onClick={() => playerRef.current?.pause()}>pause</button>
</ApiVideoPlayer>;