@dfeidao/fd-m000003 v4.6.201909291814
- 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-m000003Attributes
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 }}
/>