• fd-m000003 视频播放
• Installation
• Attributes
  • source
  • videoStyle
  • toggleResizeModeOnFullscreen
  • playInBackground
  • showOnStart
  • resizeMode
  • paused
  • repeat
  • muted
  • rate
  • controlTimeout
  • style
  • seekColor
  • disableTimer
  • disableSeekbar
  • disablePlayPause
  • disableBack
  • disableVolume
  • disableFullscreen
  • fullscreen
  • onLoadStart
  • onLoad
  • onProgress
  • onError
  • onBack
  • onEnd
  • onEnterFullscreen
  • onExitFullscreen
  • onPause
  • onPlay
• 完整使用示例

fd-m000003 视频播放

必须传入 source，videoStyle

<VideoPlayer source={{uri:'视频地址'}} videoStyle={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }} ></VideoPlayer>

Installation

yarn add --dev @dfeidao/fd-m000003

Attributes

source

资源设置媒体源 本地用法: source={require('本地视频路径')} 网络用法: source={{uri:'网络视频地址'}}

videoStyle

样式表 { [key: string]: unknown } 设置样式，`videoStyle={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}

toggleResizeModeOnFullscreen

是否自定义全屏 boolean 默认true,双击视频触发全屏按钮，若为false，可自定义全屏按钮触发行为

playInBackground

是否后台继续播放媒体 boolean 默认false，后台不继续播放媒体，若为true，切换app后台可继续播放视频

showOnStart

控制第一次渲染时是否显示控件 boolean 默认true，表示显示，若为false，表示隐藏控件

resizeMode

调整视频尺寸比例 string 'none' 默认值 'stretch' 表示独立缩放宽度和高度，初始化可能会改变src的宽高比; 'contain' 表示均匀缩放视频（保持视频的宽高比），使视频的尺寸（宽度和高度）等于或小于视图的相应尺寸（减去填充）; 'cover' 表示均匀缩放视频（保持视频的宽高比），使图像的尺寸（宽度和高度）等于或大于视图的相应尺寸（减去填充）;

paused

控制媒体初始化是否暂停 boolean 默认false，不暂停媒体 ;若为true，可暂停媒体

repeat

是否重复播放视频 boolean 默认false，不重复播放;若为true，可重复播放视频

muted

控制是否静音 boolean 默认false 不静音，若为true，表示静音

rate

播放速度 number 1.0 以正常速度播放 其他值 表示以是正常速度的几倍播放，可慢放和快放,值必须大于0

controlTimeout

设置时间去隐藏控件 Integer 默认15000 表示视频播放15秒后操作控件隐藏

style

样式表设置样式

seekColor

填充进度条的颜色 string

disableTimer

隐藏计时器 boolean 默认false

disableSeekbar

隐藏进度条 boolean 默认false

disablePlayPause

隐藏播放/暂停切换 boolean 默认false

disableBack

隐藏后退按钮 boolean 默认false

disableVolume

隐藏音量控制 boolean 默认false

disableFullscreen

隐藏全屏按钮 boolean 默认false

fullscreen

是否全屏显示视频 boolean 默认false 不全屏显示视频，若为true，全屏显示

onLoadStart

媒体开始加载时调用的回调函数 (...args: unknown[]) => void 例子 { isNetwork: true, type: '', uri: 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8' }

onLoad

加载媒体并准备播放时调用的回调函数 (...args: unknown[]) => void

onProgress

每个progressUpdateInterval秒调用的回调函数，包含有关媒体当前播放位置的信息 (...args: unknown[]) => void 例子 { currentTime: 5.2, playableDuration: 34.6, seekableDuration: 888 }

onError

报错时触发的函数 () => void;

onBack

按下后退按钮时触发的函数 () => void;

onEnd

视频播放完成时触发的函数 () => void

onEnterFullscreen

按下全屏按钮后视频进入全屏时触发 () => void

onExitFullscreen

按下全屏按钮后视频退出全屏时触发 () => void

onPause

按下暂停按钮后触发 () => void

onPlay

按下播放按钮后触发 () => void

完整使用示例

<Video
    source={{uri: "http://ips.ifeng.com/video19.ifeng.com/video09/2018/06/02/29931689-102-009-160117.mp4?vid=77809fb8-6bfe-4649-b951-21029fdd9143&uid=XHXrnG&from=v_Free&pver=vHTML5Player_v2.0.0&sver=&se=我是体育迷&cat=81-82&ptype=81&platform=pc&sourceType=h5&dt=1527926410000&gid=tNm9YWrj-bhx&sign=f1e3120205fd53a7b30f1e67174ff149&tm=1558603217010"}}
    // toggleResizeModeOnFullscreen={true}
    playInBackground={false}
    showOnStart={true}
    resizeMode={'none'}
    paused={false}
    repeat={true}
    muted={false}
    rate={1}
    // controlTimeout={4000}
    // style={{ backgroundColor: 'red' }}
    seekColor={'green'}
    disableTimer={false}
    disableSeekbar={false}
    disablePlayPause={false}
    disableBack={false}
    disableVolume={false}
    disableFullscreen={false}
    // fullscreen={true}
    onLoadStart={(...args: unknown[]) => {
        console.log('onLoadStart', args);
    }}

    onLoad={(...args: unknown[]) => {
        console.log('onLoad', args);
    }}

    // onProgress={(...args: unknown[]) => {
    // console.log('onProgress', args);
    // }}
    onError={() => {
        console.log('onError', '报错触发');
    }}

    onBack={() => {
        console.log('onBack', '点击返回按钮触发');
    }}

    onEnd={() => {
        console.log('onEnd', '视频播放完触发');
    }}

    onEnterFullscreen={() => {
        console.log('onEnterFullscreen', '点击进入全屏按钮触发');
    }}

    onExitFullscreen={() => {
        console.log('onExitFullscreen', '点击退出全屏按钮触发');
    }}

    onPause={() => {
        console.log('onPause', '暂停视频按钮触发')
    }}

    onPlay={() => {
        console.log('onPlay', '继续播放视频按钮触发')
    }}

    videoStyle={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}
/>