Question

我正在尝试创建一个播放列表组件，其中包含一个由多个mp4视频文件组成的this.state.playlist，而Video标签的源是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，如果您想测试代码：

https://snack.expo.io/By7nzgmtW

你可以想象这对于视频来说尤其是一个问题，因为它看起来只是略微超过了它们（这已经发生在我身上并且我在过去的几天里一直在努力尝试弄清楚为什么玩家似乎跳过一些视频）。

另请注意：在我自己的代码中我的完整回购（我会分享它，但它相当冗长，我认为上面的snack / repl更能说明问题）我使用require语法，因为视频文件是本地的，请告诉我们解决方案中require / uri语法之间是否存在任何差异。

此外，如果您要将我链接到文档和特定部分，我将非常感谢一个示例小吃/代表/代码，理想情况下使用我的代码作为基础，因为我已经阅读了AV的文档/视频的东西很多次，并没有找到解决方案。

谢谢。

如果你不想去链接，这是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>
    );
  }
}

编辑：

一些额外信息：

我使用了create-react-native-app生成器
expo version @ 20.0.0
反应版本@ 16.0.0-alpha.12
反应原生版^ 0.47.0
这是我正在构建的Android应用程序（虽然这很可能无关紧要，因为此代码几乎可以与ios互换）

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

0 个答案: