Skip to content

malacca/react-native-pure-video

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-pure-video

该项目源码来源于 react-native-video,删除了原版的 Controls UI,升级了 ExoPlayer 版本,修改了部分接口。由于有不少的 Break change,所以这里单独创建,不再 fork 原版了。

(当前仅支持 android,使用 ExoPlayer,直接放弃了 mediaplayer)

安装

yarn add react-native-pure-video

属性

source (Object)

视频地址,支持以下格式

// 携带额外设置
source={{
    uri: "(http|content|file|asset)://" || require("./video.mp4"),
    type: "",
    headers:{},
    holdPosition:Boolean
}}

// 仅 uri
source={{uri: "(http|content|file|asset)://"}}

// 本地视频支持直接设置
source={require("./video.mp4")}

type (String)

ExoPlayer 支持 Smoothstreaming / HLS / MPEG-DASH / OTHER,一般情况下会根据 source 的文件名或 URL 路径自动判断,如果文件名或URL不规范,可通过该参数手动指定。以下为对应 mediaType

  • ism: Smoothstreaming (不常用,如:test video)
  • m3u8: HLS (常用,国内流媒体网站一般用的都是这个)
  • mpd: MPEG-DASH (不常用, 如 test video)
  • default: OTHER (常用, 支持大部分视频格式, 如: mp4, mp3, ogg等)

headers (Object)

请求 source uri 为远程地址,支持自定义 Http Request header,格式为 {key:value, key2:value}

holdPosition (Boolean)

动态修改 source 是否保持播放进度, 如同一个视频切换源,保持进度比较好,默认为 false;

(TODO: 同一个视频切换源,保持当前源继续播放,待新播放源可播放时再进行无缝切换)

minLoadRetryCount (Int)

请求 source 失败尝试次数

maxBitRate (Int)

请求 source 网速限制,默认为0,不限制

resizeMode (String)

与 RN Image 组件相同,不支持 repeat,支持 covercontainstretchcenter 默认为 cover

paused (Boolean)

是否暂停,默认为 false

muted (Boolean)

是否静音,默认为 false

volume (Float)

音量大小,0 ~ 1 之间

seek (Float)

seek 到指定播放进度

repeat (Boolean)

是否循环播放,默认为 false

rate (Float)

播放倍率

playInBackground (Boolean)

应用处于后台时,是否持续播放,默认为 false

disableFocus (Boolean)

播放前,用户在使用其他影音软件,默认情况下,会抢占音轨,暂停其他影音软件,待播放完毕释放。如果要禁用该功能,设置该属性为 true

useTextureView (Boolean)

Android 播放画面可选用的原生组件一般为 SurfaceViewTextureView,默认使用的是 SurfaceView,设置该属性为 true, 则使用 TextureView

progressUpdateInterval (float)

通知播放进度的间隔时长,即回调中的 onProgress 的触发间隔时长,单位为毫秒,默认 250

bufferConfig (Object)

ExoPlayer 缓冲设置,该设置一旦设定,最好不要更改,因为 Native 端会重建

{
    // 最小缓冲时长(毫秒)
    minBufferMs: 15000,
    // 最大缓冲时长(毫秒)
    maxBufferMs: 50000,
    // 在播放开始前, 必须缓存的最小时长(毫秒)
    bufferForPlaybackMs: 2500,
    // 重建缓冲区,在播放器需要缓存的最小时长(毫秒)
    bufferForPlaybackAfterRebufferMs: 5000
}

textTracks (Object)

外挂字幕设置,其中 language 可参考 ISO_639-1,默认会根据用户系统语言选择对应的字幕。字幕格式支持 SRTTTMLVTT,建议使用 VTT 格式,兼容性比较好。

import PureVideo, {TextTrackType} from 'react-native-pure-video';

<PureVideo
    textTracks={[
    {
        title: "English CC",
        language: "en",
        type: TextTrackType.VTT, // "text/vtt" (支持直接使用 string)
        uri: "https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt"
    },
    {
        title: "Spanish Subtitles",
        language: "es",
        type: TextTrackType.SRT, // "application/x-subrip"
        uri: "https://durian.blender.org/wp-content/content/subtitles/sintel_es.srt"
    }
    ]}
/>

textTrackStyle (Object)

字幕样式,仅支持软字幕,软字幕可以是视频内部或外挂的 TextTrack,对于直接合并到画面的硬字幕是不支持的

textTrackStyle={{
    color:"#fff",   // 字体颜色         
    background:"transparent",  // 背景颜色
    edgeType:"shadow", // 边缘样式, 支持 none|outline|shadow|raised|depressed
    edgeColor:"#000",  // 边缘颜色
    paddingFraction:8, // 字幕下边距百分比 (0 ~ 100)
    sizeFraction:5.3,  // 字幕文字大小,占整个画面的百分比 (0 ~ 100)
    disableScale:false,// 默认会在所设置的百分比基础上,根据系统文字大小设置进行缩放,
                       //是否禁用该功能
    ignorePadding:false,// 文字占用百分比计算,是否为去除下边距之后的画面
}}

selectedVideoTrack / selectedAudioTrack / selectedTextTrack

设置视频使用的 画面/声音/字幕 轨道,具体使用方法,下面会详细解释

回调

onIdle

播放器空闲,此时还没挂载上 source (无参数)

onLoadStart

加载开始 (无参数)

onReady

播放器准备完毕,此时已加载上第一帧的画面 (无参数)

onLoad

加载完成,此时已缓冲了最小可播放时间,将要开始播放了,后面会解释。

onBuffer

缓冲状态发生变化,buffer=true 时, 表示缓冲不足,此时可显示加载提示。

onBuffer={ ({ 
    buffer
}) => {
    
} }

onProgress

播放进度通知

onProgress={ ({ 
    currentTime,
    playableDuration,
    seekableDuration
}) => {
    
} }

onEnd

播放结束 (无参数)

onTimedMetadata

HLS 直播流 timed Meta 获取成功,该回调并不是总会触发,需要 m3u8 支持。

onProgress={ ({ 
    metadata
}) => {
    
} }

// ex:
metadata: [
    { value: 'Streaming Encoder', identifier: 'TRSN' },
    { value: 'Internet Stream', identifier: 'TRSO' },
    { value: 'Any Time You Like', identifier: 'TIT2' }
]

onSizeChange

视频 size 发生变化,一般情况下,会在 onReady 后触发一次。

onSizeChange={ ({ 
    width,
    height,
    unappliedRotationDegrees,
    pixelWidthHeightRatio
}) => {
    
} }

onPaused

视频 暂停/播放;paused=true -> 暂停;paused=false -> 播放;

onPaused={ ({ 
    paused
}) => {
    
} }

onSeek

重新定位播放时间

onSeek={ ({ 
    currentTime,
    seekTime
}) => {
    
} }

onRateChange

播放速率发生变化

onRateChange={ ({ 
    rate
}) => {
    
} }

onBandwidthUpdate

带宽变动通知

onBandwidthUpdate={ ({ 
    elapsedMs,  // 距上次通知的间隔时长(毫秒)
    bytes,      // 距上次通知, 新加载字节数
    bitrate,    // 带宽
}) => {
    
} }

onAudioFocusChanged

disableFocus 未禁用的情况下;声音失去焦点、重新获得焦点时触发;比如音乐在后台播放,来电话了,会通知 focused=false,待电话结束,音乐重新播放,会通知 focused=true;当然,也有可能用户打开了其他音乐软件,那么就直接播放停止,不会再次自动获取焦点了,除非用户手动切换过来,重新播放。

onAudioFocusChanged={ ({ 
    focused
}) => {
    
} }

onAudioBecomingNoisy

音频输出设备发生变化,比如插上/拔出耳机,此时,如有必要,可暂停视频。

onError

发生错误

onError={ ({ 
    errorString,    // 友好提示
    errorException, // Native 端 exception message
}) => {
    
} }

轨道

有些视频格式,同一个视频,内部可能有多个 画面/音轨/字幕,另可通过 textTracks 拓展字幕;那么播放时就有了多种选择,默认情况下,画面会选择第一个轨道,音轨/字幕 会根据系统语言和这两个轨道的 language 尝试自动选择,无法匹配则使用第一个轨道。

可以通过 selectedVideoTrack / selectedAudioTrack / selectedTextTrack 明确指定要使用轨道。

首先,在 onLoad 回调函数中会通知当前可用的轨道(包含外挂字幕)

onLoad={ ({ 
  duration,     // 视频时长, 直播可能小于0
  currentTime,  // 当前播放位置
  width,   //视频宽度
  height,  //视频高度
  videoTracks,  //可用画面轨道
  audioTracks,  //可用音轨
  textTracks,   //可用字幕
}) => {
    
} }

轨道格式为数组,三种轨道的字段不一样,但格式都是以下这种

[
    {
        title:"",
        type:"xx",
        language:"",
        ...
    },
    ....
]

指定要使用的轨道,如

selectedAudioTrack={{
    type: "index",
    value: 1,
}}

type 指定选用标准,value 为该选用标准下要使用的值。

  1. type=index : value 为数组下标
  2. type 支持使用字段名,value 则为字段值;这样可在明确知道轨道的前提下,无需等待 onLoad,在初始化时便可指定。

比如字幕

textTracks=[
    {
        language:"zh",
        ...
    },
    {
        language:"en",
        ...
    },
    ....
]

// 可
selectedTextTrack={{
    type:"language",
    value:"zh"
}}

setNativeProps

一般情况下, props 使用父级组价 state 进行传递,但在某些情况下,为了性能或其他因素考虑,更新 state 不是特别合适,此时可使用 setNativeProps 来进行属性更新,支持以上列举的所有属性,但不支持回调函数。

import PureVideo from 'react-native-pure-video';

class App extends React.Component {
    update = () => {
        this.refs.video.setNativeProps({
            //...props
        })
    }

    render(){
        return <PureVideo ref="video" />
    }
}

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages