react-native-video 同时播放单独的视频和音轨?

Posted

技术标签:

【中文标题】react-native-video 同时播放单独的视频和音轨?【英文标题】:react-native-video play separate video an audio tracks at the same time? 【发布时间】:2020-04-13 03:44:58 【问题描述】:

我有很多来自 API 的技巧,它们分别为我提供了带有视频和音频的 uri。我可以以某种方式同时播放 2 个音轨视频和音频,并支持暂停播放搜索等吗?

音轨数据的JSON(简化):


 "itag":243,
"url":"https://r3---sn-qvoc5nnxaxjugvopj-qo3e.googlevideo.com/videoplayback?expire=1586766406\u0026ei=5s2TXsCyII-x7QSOiJH4DQ\u0026ip=109.254.29.7\u0026id=o-AOLcChVj-UlAZI2jwEAGI91RICPXewSim1R7QME77QU8\u0026itag=243\u0026aitags=133%2C134%2C135%2C136%2C137%2C160%2C242%2C243%2C244%2C247%2C248%2C271%2C278%2C313\u0026source=youtube\u0026requiressl=yes\u0026mh=Qc\u0026mm=31%2C29\u0026mn=sn-qvoc5nnxaxjugvopj-qo3e%2Csn-n8v7kn7s\u0026ms=au%2Crdu\u0026mv=m\u0026mvi=2\u0026pcm2cms=yes\u0026pl=20\u0026initcwndbps=1306250\u0026vprv=1\u0026mime=video%2Fwebm\u0026gir=yes\u0026clen=6925152\u0026dur=206.082\u0026lmt=1586712912919153\u0026mt=1586744683\u0026fvip=11\u0026keepalive=yes\u0026c=WEB\u0026txp=5531432\u0026sparams=expire%2Cei%2Cip%2Cid%2Caitags%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cgir%2Cclen%2Cdur%2Clmt\u0026sig=AJpPlLswRQIgDdRVs0zHsYYHzZ0wnnfgHKuH6fCSkiEJZ5KIHTe9VB0CIQDadvrh8UEQQ_DceojptEXZRJk9k7ROvmqonIKz7YIh_A%3D%3D\u0026lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpcm2cms%2Cpl%2Cinitcwndbps\u0026lsig=ALrAebAwRAIgFtLclvFXAYZ95mqj9GT2siK0jyWT4I1nzJz7KhSvlIkCIBU2T67wiPEaB2KzIQ-RF8Lh-7IiV22xRrRqYN-ji0fu"
"mimeType":"video/webm;+codecs=\"vp9\""

"itag":251,
"url":"https://r3---sn-qvoc5nnxaxjugvopj-qo3e.googlevideo.com/videoplayback?expire=1586766406\u0026ei=5s2TXsCyII-x7QSOiJH4DQ\u0026ip=109.254.29.7\u0026id=o-AOLcChVj-UlAZI2jwEAGI91RICPXewSim1R7QME77QU8\u0026itag=251\u0026source=youtube\u0026requiressl=yes\u0026mh=Qc\u0026mm=31%2C29\u0026mn=sn-qvoc5nnxaxjugvopj-qo3e%2Csn-n8v7kn7s\u0026ms=au%2Crdu\u0026mv=m\u0026mvi=2\u0026pcm2cms=yes\u0026pl=20\u0026initcwndbps=1306250\u0026vprv=1\u0026mime=audio%2Fwebm\u0026gir=yes\u0026clen=3192185\u0026dur=206.101\u0026lmt=1586712383489185\u0026mt=1586744683\u0026fvip=11\u0026keepalive=yes\u0026c=WEB\u0026txp=5531432\u0026sparams=expire%2Cei%2Cip%2Cid%2Citag%2Csource%2Crequiressl%2Cvprv%2Cmime%2Cgir%2Cclen%2Cdur%2Clmt\u0026sig=AJpPlLswRQIhAKCF9GRv40ium4N-nMAcgHw6uVx4gdWsPGf-pSzv0mFsAiAW79mCjaeI-4MuOxIwrWP4ICd0Yc_SIBloHtCb_oAvOQ%3D%3D\u0026lsparams=mh%2Cmm%2Cmn%2Cms%2Cmv%2Cmvi%2Cpcm2cms%2Cpl%2Cinitcwndbps\u0026lsig=ALrAebAwRAIgFtLclvFXAYZ95mqj9GT2siK0jyWT4I1nzJz7KhSvlIkCIBU2T67wiPEaB2KzIQ-RF8Lh-7IiV22xRrRqYN-ji0fu",
"mimeType":"audio/webm;+codecs=\"opus\""

【问题讨论】:

【参考方案1】:

尽管理论上是可行的(毕竟这些都是可播放的流),但通过像 RN Video 这样的高级组件来做到这一点的可能性很小。轨道在一起并不能构成有效的流媒体内容,因此底层播放器必须准备好播放多源资产,这反过来又是一个非常不寻常的用例。

【讨论】:

以上是关于react-native-video 同时播放单独的视频和音轨?的主要内容,如果未能解决你的问题,请参考以下文章

在 react-native-video 中,视频播放完毕后如何重置视频播放器?

使用来自 firebase 存储的 react-native-video 播放视频

如何使用 react-native-video 从谷歌驱动器播放视频?

使用 react-native-video 播放视频时显示计时器

视频的背景音频 react-native-video

在 React-native-video 中,一些视频无法在三星设备中播放