简体中文

视频播放器

视频播放器。

基础
/**
 * 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>
    );
  }
}

基础例子,展示了两种不同的显示类型以及几种模式。

  • op

    eden的OP

  • world

    bml world

  • op

    eden的OP

  • world

    bml world

  • op

    eden的OP

  • world

    bml world

  • op

    eden的OP

  • world

    bml world

00:00

00:00

属性说明

属性名 类型 默认值 说明
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元素上。