如何捕获 Youtube 视频的图像并在网站上显示 [英] How to capture image of Youtube Video and display on web site
问题描述
我有兴趣创建一个在屏幕上显示一些屏幕截图"的网站.这些屏幕截图"可以是任何图像文件类型(例如:jpeg、png 等)，我希望能够显示 Youtube 视频的第一帧屏幕截图.当用户点击它时，用户将被重定向到 Youtube URL.
I am interested in creating a website that displays a few "screen captures" on the screen. These "screen captures" can be any image file type (ex: jpeg, png, etc.) I would like to be able to display the first frame screen capture of a Youtube Video. When the user clicks on this, the user will be redirected to the Youtube URL.
根据 URL，如何检索 Youtube 视频的屏幕截图或第一帧图像?例如:http://www.youtube.com/watch?v=gbcmYbMB9mo 使用这个，我想要一张 GoPro 相机的图像.是否有用于捕获 Youtube 视频的第一张图像的 API?
How can I retrieve the screen shot or first frame image of a Youtube video, given it's URL? For example: http://www.youtube.com/watch?v=gbcmYbMB9mo Using this, I'd like to have an image of the GoPro camera. Is there an API to capture the first image of the Youtube Video?
谢谢
推荐答案
您可以使用 YouTube IFrame API(请参阅 https://developers.google.com/youtube/iframe_api_reference).
You can use YouTube IFrame API (see https://developers.google.com/youtube/iframe_api_reference).
以下是播放问题中提供的视频的示例 (gbcmYbMB9mo):
Here is an example for playing the video provided in your question (gbcmYbMB9mo):
<body onload="LoadYouTubeIframeAPI()">
<script type="text/javascript">
var player = null;
var playerParams =
{
playerVars:
{
"enablejsapi":1,
"origin":document.domain,
"rel":0
},
events:
{
"onReady":onPlayerReady,
"onError":onPlayerError,
"onStateChange":onPlayerStateChange
}
};
function LoadYouTubeIframeAPI()
{
var scriptElement = document.createElement("script");
scriptElement.src = "http://www.youtube.com/iframe_api";
var firstScriptElement = document.getElementsByTagName("script")[0];
firstScriptElement.parentNode.insertBefore(scriptElement,firstScriptElement);
}
function onYouTubeIframeAPIReady()
{
player = new YT.Player("player",playerParams);
}
function onPlayerReady(event)
{
player.loadVideoById("gbcmYbMB9mo");
}
function onPlayerError(event)
{
...
}
function onPlayerStateChange(event)
{
if (event.data == YT.PlayerState.ENDED)
{
...
}
}
</script>
</body>
您可能需要使用此代码播放一点"以防止视频自动启动...
You might need to "play a little" with this code in order to prevent the video from starting automatically...
这篇关于如何捕获 Youtube 视频的图像并在网站上显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
