Question

作为一个菜鸟，我正在尝试创建一个在视口中播放视频（本地视频）的应用。用户左右滚动，观看视频时自动播放。如果视频不清晰，它将停止播放。

我尝试了以下教程： https://codedaily.io/courses/4/Fundamentals-of-React-Native-Video/37

将所有计算更改为使用宽度而不是高度，但是不起作用。

然后我偶然发现了Skele-Components： https://blog.netcetera.com/viewport-aware-components-for-react-native-apps-a28ea605e89e

检查组件是否在视图中。作为测试，我在ScrollView中放置了2个视频。滚动我console.logged，当视频进入时为“ Entered”，当视频离开视口时为“ Left”。视口清楚地显示了一个视频，但控制台记录了2个“ Entered”。告诉我逻辑不起作用。另外，当视频滚动出视线范围时，控制台也不会显示“左”。

如果您可以看一下代码，那么一些帮助将非常有用。谢谢。

下面是包含视频源组件的滚动视图。

export default class VideoScrollView extends Component {
  render() {
    return (
      <Viewport.Tracker>
        <ScrollView
          horizontal={true}
          pagingEnabled={true}
          scrollEventThrottle={16}
        >
            <Ad source={Ad28} />
            <Ad source={Ad29} />
        </ScrollView>
      </Viewport.Tracker>
    );
  }
}

下面是视频组件

const ViewportAwareVideo = Viewport.Aware(Video);

export class VideoAd extends Component {

  render() {
    this.state = {
      paused: true,
      visible: false
    };

    return (
      <View style={styles.viewContainer}>
        <ViewportAwareVideo
          source={this.props.source}
          paused={this.state.paused}
          style={{ width: "100%", height: "100%" }}
          innerRef={ref => (this.player = ref)}
          onViewportEnter={() => console.log("entered")}
          onViewportLeave={() => console.log("left")}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    width: Dimensions.get("window").width,
    justifyContent: "center",
    alignItems: "center"
  }
});

Answer 1

确保使用的是Skele版本1.0.0-alpha.40或更高版本。在该版本下，不支持水平滚动视图的视口感知。这是可以帮助您的有效小吃：https://snack.expo.io/@bevkoski/viewport-aware-lazy-loading-(horizontal)。

使用Skele组件在React-Native的视口中播放视频

1 个答案: