如何useRef触发一个iframe youtube视频播放按钮?

Question

代码优先。

import React, { useRef } from 'react';
const VideoWithPlayButton: React.FC<Props> = () => {
const playButton = useRef<HTMLDivElement>(null);
const video = useRef<HTMLIFrameElement>(null);
const playVideo = () => {
if(video.current) {
video.current.click();
}
}
return (
<div>
<iframe ref={video} width="100%" height="100%" src={https://www.youtube.com/embed/_E2r2vOlqvA?controls=0&showinfo=0&autohide=1&autoplay=0&rel=0} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
<div>
<div ref={playButton} onClick={playVideo}>
<Image src={playButtonImg} alt="play"/>
</div>
</div>
</div>
);
};
export default VideoWithPlayButton;

为了覆盖YouTube默认的播放按钮的客户图标(对不起YouTube)

所以我用onClick事件设置一个div

然后获取iframe DOM元素，触发click();

我很确定我得到了iframe元素，但是视频没有播放。

是可能的吗?

或者我必须创建iframe元素与自动播放后，我点击按钮?

Answer 1

嗯，碰巧我有一个组件可以做你想做的事情。加载Iframes可能需要一段时间(这对SEO不利)。这就是为什么我创建了一个组件，只加载缩略图与中间的youtube播放按钮作为svg。当你点击缩略图时，Iframe就会加载。你可以选择任何你想要的svg作为默认播放按钮。

这是组件:

import { useRef } from 'react'
// thumbnailQuality: 'default' | 'hqdefault' | 'mqdefault' | 'sddefault'
export default function YouTubeFrame({ video, width, height }) {
const divRef = useRef(null)
const thumbnailQuality = 'sddefault'
const onClick = () => {
const iframe = document.createElement('iframe')
iframe.setAttribute('frameborder', '0')
iframe.setAttribute('allowfullscreen', '1')
iframe.setAttribute(
'allow',
'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
)
iframe.style.width = width ? width : '560px'
iframe.style.height = height ? height : '315px'
iframe.setAttribute('src', `https://www.youtube.com/embed/${video}?rel=0&showinfo=1&autoplay=1`)
if (divRef.current) {
divRef.current.innerHTML = ''
divRef.current.appendChild(iframe)
}
}
return (
<div ref={divRef} className="relative">
<span
onClick={onClick}
className="absolute left-1/2 top-1/2"
style={{ transform: 'translate(-50%, -50%)' }}
>
<svg version="1.1" viewBox="0 0 68 48" width="60" height="60">
<path
d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
fill="#f00"
></path>
<path d="M 45,24 27,14 27,34" fill="#fff"></path>
</svg>
</span>
<img
onClick={onClick}
loading="lazy"
src={`https://img.youtube.com/vi/${video}/${thumbnailQuality}.jpg`}
alt="YouTube Video Thumbnail"
className="w-full object-cover object-center sm:h-[400px] lg:h-[360px] xl:h-[425px]"
/>
</div>
)
}

用法:

<YoutubeFrame video="eLLdfHcZRDY" /> //use the video id from the youtube url.