问题描述
我正在使用HTML5和Javascript创建视频播放器，我想知道是否有人解决了创建动态缩略图的难题。
I'm creating a video player with HTML5 and Javascript and I'm wondering if anyone has solved the challenge of creating dynamic thumbnails.
模仿youtube视频播放器您将鼠标悬停在进度栏上，将显示带有缩略图的弹出窗口。我知道youtube会保存图片并根据悬停的位置将其在缩略图查看器框架中重新放置。
Mimicking youtube video player where you hover over progress bar and a popup shows with a thumbnail. I know that youtube saves out an image and repositions the sprite in the thumbnail viewer frame based on position hovered over.
使用JS和canvas可行吗？
Is this viable to do with JS and canvas?
我现在正在做的是...将鼠标悬停在进度栏上会创建一个video元素的副本。然后，在复制的元素上设置currentTime。然后，我使用画布获取快照。我不确定为什么，但是图像似乎空白。
What I'm doing now is... hovering over my progress bar creates a copy of the video element. I then set the currentTime on the copied element. I then grab a snapshot using canvas. I'm not sure why, but the images seem to be blank.
也许有人遇到了这个问题？
Maybe someone has run into this problem?
推荐答案
YouTube有预先绘制的拇指，这些拇指存储在具有十列的网格中的单个图像中，并且需要多少行。我看到的thum图像是低质量jpg 800像素，整个拇指80像素×？ （取决于方面）当用户将拇指悬停在最接近该时间的位置时。
YouTube have pre rendered thumbs that are stored in a single image in a grid with ten columns and how ever many rows are needed. The thum images I have seen are low quality jpg 800 pixels across giving thumbs 80 pixels by ?? (depending on aspect) When the user hovers the thumb closest to the that time is displayed.
在客户端创建大拇指是有问题的，因为视频并非完全随机访问。寻求随机位置涉及将视频移至最近的上一个关键帧，然后解码所有帧，直到到达所需的帧为止。根据格式，编码选项，关键帧的间距（如果有滚动眼睛）以及搜索位置已加载的情况，搜索某个位置可能会非常慢。为视频获得一些经验可能会花费很长时间。 HTML5视频API的另一个问题是，它只有一个播放通道，因此，在寻找拇指时，您将无法观看视频。
Creating the thumbs at the client side will be problematic because video are not entirely random access. Seeking to a random location involves the video moving to the nearest previous keyframe and then decoding all frames till it gets to the frame you have requested. Depending on the format, encoding options, the spacing of key frames (if any rolling eyes), and if the seek location has been loaded, seeking to some location can be very slow. Getting a set of thumbs for a video can take a long time. The additional problem with the HTML5 video API is that it has only one playback channel, so while you are seeking for thumbs you can not watch the video.
空白问题
尝试
video.addEventListener("seeked",function(e){
// snap shot code here
});
但是我发现这并不总是有效。因此，收听所有适当的事件并仅在视频准备就绪时进行搜索是值得的。这是。
But this does not always work I have found. So it pays to listen to all the appropriate events, and only seek when the video is ready. Here is a list of media events that will help.
视频不改变，最好的选择是在视频上传后在服务器上创建大拇指。低质量的jpg似乎已成为主流，并且比视频的一小部分都要早得多地被客户端加载。
As videos don't change your best bet is to create the thumbs on your server after the video has been uploaded. Low quality jpgs seem to be the go and will be loaded by the client much sooner than even a fraction of the video has been.
这篇关于悬停动态视频缩略图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！