javascript - 无法让播放和暂停按钮与 iFrame 一起正常工作

Question

我一直在尝试在我的 React Native 应用程序中嵌入数组中的随机 YouTube 视频。到目前为止效果很好，每次我转到另一个屏幕然后返回时，都会出现另一个视频！现在我一直在尝试实现外部暂停/播放按钮！当数组中只有一个 YouTube 链接时，这些效果很好！但是，如果我添加其他链接，播放/暂停按钮就会开始出现故障，每次我按下一个按钮时，它要么什么都不做，要么转到另一个视频，要么暂停视频！我不认为这是随机的，似乎有一个系统无法正常工作，但我根本无法弄清楚！一种猜测是，问题在于“正在播放”的状态，有时即使在播放 === true 时视频也无法播放？好吧，idk，也许你们中的一个可以帮忙！这是代码：

import React, { useState, useCallback, useRef } from "react";
import { Button, View, Alert, Text } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";
import {NeuView, NeuButton} from 'react-native-neu-element';
import { set } from "react-native-reanimated";
//import {LinearGradient} from 'expo-linear-gradient';
//import {LinearGradient} from 'react-native-linear-gradient';

//example vids
const videos = [
  'iNQAp2RtXBw',
  'AJqiFpAl8Ew',
  'IdoD2147Fik',
]

const randomVideo = () =>
videos[Math.floor(Math.random() * videos.length)];

export default function funnyVideos() {
  const [playing, setPlaying] = useState(false);

  function pause() {
    if (playing === true) {
      setPlaying(false)
    }
  }
  function play() {
    if (playing === false) {
      setPlaying(true)
    }
  }
  
    
 

return (
    <View  alignItems = 'center' >
      <NeuView style = {{marginTop: '15%'}}  width = {330} height = {200} color = '#f2f2f2' borderRadius = {20} >
        <View overflow = 'hidden' height = {169}  style = {{position: 'relative', marginTop: 0}} justifyContent = 'center' alignContent = 'center' borderRadius = {10}> 

          <YoutubePlayer
            height={'100%'}
            width={300}
            videoId = {randomVideo()}
            play = {playing}
          />
      </View>
    </NeuView>
    
    <View flexDirection = 'row'>
      <NeuButton style = {{marginTop: 60, marginRight: 45}}  width = {100}  height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} onPress = {play} borderRadius = {20}>
        <Text>
          play
        </Text>
      </NeuButton>
      <NeuButton style = {{marginTop: 60}}  width = {100}  height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} onPress = {pause} borderRadius = {20}>
        <Text>
          pause
        </Text>
      </NeuButton>
    </View>
      <NeuButton style = {{marginTop: 45}} width = {250}  height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} borderRadius = {20}>
        <Text>
          Next Video
        </Text>
      </NeuButton>

    
    </View>
  ); 
}

标签： javascriptreact-native

Answer 1

这将完成这项工作，而且我还冒昧地改进了一些代码。

import React, { useState, useCallback, useRef } from "react";
import { Button, View, Alert, Text } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";
import {NeuView, NeuButton} from 'react-native-neu-element';
import { set } from "react-native-reanimated";

//example vids
const videos = [
  'iNQAp2RtXBw',
  'AJqiFpAl8Ew',
  'IdoD2147Fik',
]

const randomVideo = () =>
videos[Math.floor(Math.random() * videos.length)];

export default function FunnyVideos() {
  const [playing, setPlaying] = useState(false);
    const [videoId, setRandomVideoId] = useState(randomVideo());

  const pauseOrPlay = () => useCallback({
    setPlaying(!playing)
  },[playing])

  return (
    <View  alignItems = 'center' >
      <NeuView style = {{marginTop: '15%'}}  width = {330} height = {200} color = '#f2f2f2' borderRadius = {20} >
        <View overflow = 'hidden' height = {169}  style = {{position: 'relative', marginTop: 0}} justifyContent = 'center' alignContent = 'center' borderRadius = {10}> 

          <YoutubePlayer
            height={'100%'}
            width={300}
            videoId = {videoId}
            play = {playing}
          />
      </View>
    </NeuView>
    
    <View flexDirection = 'row'>
      <NeuButton style = {{marginTop: 60, marginRight: 45}}  width = {100}  height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} onPress = {play} borderRadius = {20}>
        <Text>
          play
        </Text>
      </NeuButton>
      <NeuButton style = {{marginTop: 60}}  width = {100}  height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} onPress = {pause} borderRadius = {20}>
        <Text>
          pause
        </Text>
      </NeuButton>
    </View>
      <NeuButton style = {{marginTop: 45}} width = {250}  height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} borderRadius = {20}>
        <Text>
          Next Video
        </Text>
      </NeuButton>

    
    </View>
  ); 
}