视频播放器。
/**
* Author: ひまわり(dtysky<dtysky@outlook.com>)
* Github: https://github.com/dtysky
* Created: 2017/3/15
*/
import React, {Component} from 'react';
import {VideoPlayer} from 'hana-ui';
import ExampleBlock from 'demo/ExampleBlock';
/**
* @en
* Base
*
* Base example with tow predefined view type and mode.
*
* @cn
* 基础
*
* 基础例子,展示了两种不同的显示类型以及几种模式。
*
*/
export default class ExampleBase extends Component {
render() {
return (
<div>
<ExampleBlock>
<VideoPlayer
view={'window'}
list={[
{
title: 'op',
desc: 'eden的OP',
sources: [
{src: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/op.mp4'}
],
text: '蛤蛤蛤',
poster: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg',
image: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg'
},
{
title: 'world',
desc: 'bml world',
sources: [
{src: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/world.mp4'}
],
text: '蛤蛤蛤',
poster: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg',
image: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg'
},
{
title: 'op',
desc: 'eden的OP',
sources: [
{src: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/op.mp4'}
],
text: '蛤蛤蛤',
poster: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg',
image: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg'
},
{
title: 'world',
desc: 'bml world',
sources: [
{src: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/world.mp4'}
],
text: '蛤蛤蛤',
poster: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg',
image: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg'
},
{
title: 'op',
desc: 'eden的OP',
sources: [
{src: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/op.mp4'}
],
text: '蛤蛤蛤',
poster: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg',
image: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg'
},
{
title: 'world',
desc: 'bml world',
sources: [
{src: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/world.mp4'}
],
text: '蛤蛤蛤',
poster: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg',
image: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg'
},
{
title: 'op',
desc: 'eden的OP',
sources: [
{src: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/op.mp4'}
],
text: '蛤蛤蛤',
poster: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg',
image: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg'
},
{
title: 'world',
desc: 'bml world',
sources: [
{src: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/world.mp4'}
],
text: '蛤蛤蛤',
poster: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg',
image: 'http://oekm6wrcq.bkt.clouddn.com/hana-ui/hana.jpg'
}
]}
>
<p>蛤蛤</p>
</VideoPlayer>
</ExampleBlock>
</div>
);
}
}
基础例子,展示了两种不同的显示类型以及几种模式。
eden的OP
bml world
eden的OP
bml world
eden的OP
bml world
eden的OP
bml world
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
view | enum: 'window' 'full' |
'window' | 切换窗口和全屏模式。 |
mode | enum: 'random' 'cycle' 'repeat' 'normal' |
'normal' | Mode of playing, could be set to 'random', 'cycle', 'repeat', 'normal'. |
preload | string | 'auto' | 允许当前视频被预加载。 |
autoPlay | bool | false | 允许当前视频自动播放。 |
play | bool | 播放当前视频。 | |
currentTime | number | 设置当前视频的播放时间。 | |
volume | number | 设置音量。 | |
list | arrayOf | [] | 视频列表。 由一个被视频元素构造的列表组成: title: 视频标题。 desc: 视频描述信息。 sources: 视频源列表:{src: 源文件链接,源类型}。 image: 当视频源文件都无效时,默认显示的图像。 text: 当视频源文件和默认图像都无效时,显示的元素。 poster: 视频封面。 |
currentItem | number | 当前视频在列表中的序号。 | |
defaultText | string | 'Not support !' | 视频默认介绍信息。 |
defaultImage | string | 视频默认图片。 | |
defaultPoster | string | 视频默认封面。 | |
style | object | 提示框的样式。 | |
className | string | 提示框根元素的class。 | |
children | node | 子级元素。 |
未在文档中说明的属性将会被自动加到根元素或form元素上。