Android 视频播放列表问题（当一个视频结束时，下一个视频从上一个视频长度开始播放）Expo/React Native

我正在尝试创建一个播放列表组件，该组件具有由多个mp4视频文件组成的this.state.playlist，并且视频标记的来源是this.state.playlist[0]。理想情况下，当一个视频结束时，this.state.playlist会移动第一个组件并将其向后推，有效地移动到下一个组件。然而，下一个视频似乎是在第一个视频结束的同时开始的

例如：如果我有视频A（1分10秒），视频B（1分40秒），视频C（2分10秒）。在本例中，视频A将正常播放，视频B将在1分10秒开始播放，视频C将在1分40秒开始播放。下面是一个示例expo.snack/Online Repl，如果您想测试代码：

你可以想象，这是一个特别的问题，当涉及到视频时，它似乎只是跳过了他们一般的时间相同（这一直发生在我身上，我一直在努力找出为什么球员似乎跳过一些视频过去几天）

另外请注意：在我自己的完整repo代码中（我会分享它，但它相当长，我认为上面的snack/repl更能说明问题），我使用require语法，因为视频文件是本地的，所以请让我知道您的解决方案中require/uri语法之间是否有任何差异

另外，如果您要将我链接到文档和某个特定部分，我将非常感谢使用我的代码作为基础的示例snack/repl/code，因为我已经多次阅读了有关AV/Video内容的文档，还没有找到解决方案

多谢各位

以下是repl/expo.snack中的完整代码，如果您不想转到该链接：

import React, { Component } from 'react';
import { View } from 'react-native';
import { Video } from 'expo';


export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      playlist: [
        {src: 'http://wsiatest.bitballoon.com/videotrack.mp4', name: 'dancers'},
        {src: 'https://mohammadhunan.herokuapp.com/coding.mp4', name: 'portfolio'},
        {src: 'http://www.html5videoplayer.net/videos/toystory.mp4', name: 'toys'}
        ]
    }
  }
  videoUpdated(playbackStatus){
    if(playbackStatus['didJustFinish']){
      this.playNext();
    }
  }
  playNext(){
    // playNext() method takes the first item in the this.state.playlist array and moves it to the back
   console.log('video did just finish');
    let playlist = this.state.playlist;
      let temp = playlist[0];
      playlist.shift(); 
      playlist.push(temp);
      this.setState({playlist,})
  }
  render() {
    return (
      <View>
        <Video 
        onPlaybackStatusUpdate={(playbackStatus)=> this.videoUpdated(playbackStatus)}
        resizeMode="cover" 
        source={{uri: this.state.playlist[0].src}}
        useNativeControls
        rate={1.0}
        volume={1.0}
        muted={false} style={{height:180,width:240}} />
      </View>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{View}；
从“expo”导入{Video}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
播放列表：[
{src:'http://wsiatest.bitballoon.com/videotrack.mp4，名字：'舞者'}，
{src:'https://mohammadhunan.herokuapp.com/coding.mp4，名称：'portfolio'}，
{src:'http://www.html5videoplayer.net/videos/toystory.mp4'名称：'玩具'}
]
}
}
视频更新（播放后台状态）{
if（playbackStatus['didJustFinish']）{
这个。playNext（）；
}
}
播放下一个（）{
//方法获取this.state.playlist数组中的第一项并将其移到后面
log（“视频刚刚完成”）；
让playlist=this.state.playlist；
let temp=播放列表[0]；
playlist.shift（）；
播放列表。推送（临时）；
this.setState（{playlist，}）
}
render（）{
返回(
此.videoUpdated（playbackStatus）}
resizeMode=“封面”
source={uri:this.state.playlist[0].src}
使用控制
速率={1.0}
卷={1.0}
静音={false}样式={{高度：180，宽度：240}/>
);
}
}

编辑：

一些额外信息：

• 我使用了CreateReact本地应用程序生成器
• 世博版@20.0.0
• react version@16.0.0-alpha.12
• react本机版本^0.47.0
• 这是我正在构建的一个android应用程序（尽管这很可能与此无关，因为此代码与ios几乎可以互换）

---

播放列表示例（的第3段）使用

unloadAsync

和

loadAsync

处理播放列表的方式稍有不同。你研究过这个方法吗？我有一种感觉，没有加载一个新的视频是造成这个问题的原因。嗨，谢谢你，这是从我的工作结束！它让我了解如何做循环！非常感谢！