2

我正在尝试创建一个播放列表组件，它有一个由多个 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

您可以想象，当涉及到与通常只是跳过它们的时间相同的视频时，这尤其是一个问题（这已经发生在我身上，过去几天我一直在努力弄清楚为什么播放器似乎跳过了一些视频）。

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

另外，如果您要将我链接到文档和特定部分，我将非常感谢一个示例小吃/repl/代码，最好使用我的代码作为基础，因为我已经阅读了 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>
    );
  }
}

编辑：

一些额外的信息：

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

0 回答 0