rax-video

支持

Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

描述

视频播放组件

安装

$ npm install rax-video --save

属性

| 属性 | 类型 | 默认值 | 必填 | 描述 | 支持 | | ----------- | ---------- | ---------- | -------- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | string | - | ✘ | id 选择器 | | | src | string | - | ✔️ | 视频地址 | | | autoPlay | boolean | false | ✘ | 设置视频自动播放 | | | muted | boolean | false | ✘ | 是否播放音频 | | | loop | boolean | false | ✘ | 是否循环播放 | | | controls | boolean | true | ✘ | 是否展示 control panel | | | playControl | string | pause | ✘ | play 或 pause，控制视频播放，如果不设置，则通过autoPlay属性来判定当视频加载后，是否播放 | | | poster | string | - | ✘ | 视频封面图的url，支持jpg、png等图片，如https://***.jpg | | | onEnded | function | - | ✘ | 当视频播放完成时调用的 callback 函数 | | | showMuteBtn | boolean | true | ✘ | 是否展示工具栏上的静音按钮 | | | showPlayBtn | boolean | true | ✘ | 是否显示视频底部控制栏的播放按钮 | | | showFullscreenBtn | boolean | true | ✘ | 是否显示全屏按钮 | | | showCenterPlayBtn | boolean | true | ✘ | 是否显示视频中间的播放按钮 | | | showThinProgressBar | boolean | false | ✘ | 当底部工具条隐藏时，是否显示细进度条（controls=false 时设置无效） | | | objectFit | string | contain | ✘ | 当视频大小与 video 容器大小不一致时，视频的表现形式。可选值参考各小程序文档 | |

示例

import { createElement, render } from 'rax';
import Video from 'rax-video';
import DriverUniversal from 'driver-universal';

function VideoDemo() {
  return (
    <Video
      src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4"
      style={{ width: 750, height: 400 }}
      autoPlay
    />
  );
}

render(<VideoDemo />, document.body, { driver: DriverUniversal });