Fatal编程技术网
  • javascript/
  • Javascript 如何将Youtube API方法应用于选定的<；iframe>；元素？

Javascript 如何将Youtube API方法应用于选定的<；iframe>；元素？

javascript reactjs iframe

Javascript 如何将Youtube API方法应用于选定的<；iframe>；元素？,javascript,reactjs,iframe,youtube-iframe-api,Javascript,Reactjs,Iframe,Youtube Iframe Api,我嵌入了许多Youtube视频，这些视频是用react player组件创建的，因此我找不到一种方法来应用iframe api方法，如以下所述： <html> <body> <div id="player"></div> <button onclick={stopVideo}>Stop</button> <script> var tag = docu

我嵌入了许多Youtube视频，这些视频是用react player组件创建的，因此我找不到一种方法来应用iframe api方法，如以下所述：

<html>
  <body>

    <div id="player"></div>
    <button onclick={stopVideo}>Stop</button>

    <script>
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          videoId: 'M7lc1UVf-VE',
        });
      }

      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

video = document.getElementsByTagName('iframe')[0]
video.pauseVideo()
以下是完整的组件：

const Slider = (props) => {
  const [sliders, setSliders] = useState([])
  const [index, setIndex] = useState(0)

  //stop and play when change selected video in Carousel
  const handleSelect = (selectedIndex, e) => {
    let beforeSlide = sliders[index]
    let afterSlide = sliders[selectedIndex]
    let video

    if (beforeSlide.type_rsc == 1) {
      if (beforeSlide.resource.indexOf('youtube')) {
        video = document.getElementsByTagName('iframe')[0]
        console.log(video.getPlayerState())
        video.pauseVideo()
      }
    }
    if (afterSlide.type_rsc == 1) {
      if (beforeSlide.resource.indexOf('youtube')) {
        video = document.getElementsByTagName('iframe')[1]
        video.playVideo()
      }
    }
    setIndex(selectedIndex)
  }
  //loads Youtube API
  useEffect(() => {
    if (!window.YT) {
      const tag = document.createElement('script');
      tag.src = 'https://www.youtube.com/iframe_api';

      const firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    } 
  }, [])
  //get videos which will be embedded
  useEffect(() => {
    async function getSlidersClient() {
      const rs = await slidersClient()
      if (rs.status === 200) {
        setSliders(rs.data)
      }
    }
    getSlidersClient()
  }, [])

  return (
    <>
      {sliders.length > 0 ? (
        <Container className="container-slider margin-top-md">
          <Carousel
            controls={true}
            activeIndex={index}
            onSelect={handleSelect}
          >
            {sliders.map((item, i) => (
              <Carousel.Item key={i}>
                <ReactPlayer
                controls={true}
                id={i + item.resource}
                url={item.resource}
                />
              </Carousel.Item>
            ))}
          </Carousel>
        </Container>
      ) : null}
    </>
  )
}
export default Slider

const滑块=（道具）=>{
常量[滑块，设置滑块]=useState（[]）
const[index，setIndex]=useState（0）
//在旋转木马中更改所选视频时停止并播放
const handleSelect=（selectedIndex，e）=>{
let BeforeSiled=滑块[索引]
让afterSlide=滑块[选定的索引]
让视频
如果（beforeSlide.type_rsc==1）{
if（beforeSlide.resource.indexOf（'youtube'））{
video=document.getElementsByTagName（'iframe'）[0]
console.log（video.getPlayerState（））
video.pauseVideo（）
}
}
if（afterSlide.type_rsc==1）{
if（beforeSlide.resource.indexOf（'youtube'））{
video=document.getElementsByTagName（'iframe'）[1]
video.playVideo（）
}
}
设置索引（selectedIndex）
}
//加载Youtube API
useffect（（）=>{
如果（！window.YT）{
const tag=document.createElement（'script'）；
tag.src=https://www.youtube.com/iframe_api';
const firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
} 
}, [])
//获取将被嵌入的视频
useffect（（）=>{
异步函数getSliderClient（）{
const rs=等待滑块客户端（）
如果（rs.status==200）{
固定滑块（rs.data）
}
}
getSlidersClient（）
}, [])
返回(
{sliders.length>0(
{sliders.map（（项目，i）=>(
))}
)：null}
)
}
导出默认滑块
当我尝试应用任何API方法时，我收到此错误：
TypeError:video.getPlayerState不是一个函数
但它们确实是文档或答案中提到的函数，因此错误显然是由于其他原因造成的

有没有办法应用youtube API方法来选择元素本身，或者如何实现这一点？

您得到的错误是什么。@Sujit.Warrier此错误给我类型错误：video.getPlayerState不是函数。在您提供的链接中，playVideo和pauseVideo方法仅在player对象（YT.player实例）上可用。然而，您在视频对象上调用它，它只是iframe DOM元素的引用。@Sujit.Warrier我认为您所说的方法是正确的。这里的问题是我没有一个player对象，因为iframe是由react player组件生成的，而不是由组件本身生成的YT.player实例。我很想知道iframeapi方法在这种情况下的应用。