当前位置: 首页 > 文档资料 > Rax 中文文档 >

Video

优质
小牛编辑
128浏览
2023-12-01

描述

视频播放组件。

安装

$ npm install rax-video --save

属性

属性类型默认值必填描述支持
idstring-id 选择器
srcstring-✔️视频地址
autoPlaybooleanfalse设置视频自动播放
mutedbooleanfalse是否播放音频
loopbooleanfalse是否循环播放
controlsbooleantrue是否展示 control panel
playControlstringpauseplaypause,控制视频播放,如果不设置,则通过autoPlay属性来判定当视频加载后,是否播放
posterstring-视频封面图的url,支持jpg、png等图片,如https://***.jpg
onEndedfunction-当视频播放完成时调用的 callback 函数

注:基础属性、事件及图片含义见组件概述

示例

基础用法

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

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

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

自动播放

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

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

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