video html5：是不是可以在特定时间显示视频的缩略图？

Posted 2023-05-07

【中文标题】video html5：是不是可以在特定时间显示视频的缩略图？

【英文标题】：video html5: Is it possible to display thumbnail from video on a specific time?video html5：是否可以在特定时间显示视频的缩略图？

【发布时间】：2014-05-01 16:50:25

【问题描述】：

我用它在浏览器上安装视频播放器

<video   controls>
  <source src="video.mp4" type="video/mp4">
</video>

在点击播放之前，它会从视频的开头显示一个图像，但在我的大部分视频中，前几秒钟是黑屏。是否可以让它在视频的特定时间获取图像，例如“0:00:15”，而无需为视频创建缩略图？

【问题讨论】：

不完全是，但您可以利用poster attribute of <video>。

但是我必须创建一个缩略图:(

【参考方案1】：

我只是想再添加一件事，我猜你忘了在视频标签中添加 preload="metadata" 属性，如下所示

<video preload="metadata"   controls>
      <source src="video.mp4#t=15" type="video/mp4">
    </video>

我还要补充一点，这不会在 15 秒后开始播放视频，这只会从视频中截取屏幕截图并将其作为视频的第一个视图

【参考方案2】：

也许这有帮助：（我还没有测试过。你也可以将视频的“海报”属性设置为图像对象的 src。试试吧。=））

<video   controls id="video">
    <source src="video.mp4" type="video/mp4">
</video>

$(document).ready(function() 


            var time = 15;
            var scale = 1;

            var video_obj = null;

            document.getElementById('video').addEventListener('loadedmetadata', function() 
                 this.currentTime = time;
                 video_obj = this;

            , false);

            document.getElementById('video').addEventListener('loadeddata', function() 
                 var video = document.getElementById('video');

                 var canvas = document.createElement("canvas");
                 canvas.width = video.videoWidth * scale;
                 canvas.height = video.videoHeight * scale;
                 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

                 var img = document.createElement("img");
                img.src = canvas.toDataURL();
                $('#thumbnail').append(img);

                video_obj.currentTime = 0;

            , false);

        );

Source 1 Source 2

【讨论】：

它将在“时间”变量中设置的时间开始播放，但我希望它从头开始播放，只显示从 0:00:15 开始的图像

尝试将整个代码放入事件函数中。所以在 this.currentTime;... 附加完成后，将时间设置回 0。如果可行，请告诉我。 =)

我将它添加到脚本的末尾：“document.getElementById('video').addEventListener('loadedmetadata', function() this.currentTime = 0; , false);"它跳回到开头，但预计将在 0:00:15 捕获的缩略图也是如此

视频必须托管在同一个域下，我不太清楚为什么。此示例适用于 chrome 和 safari，但不适用于 firefox：Click Me。这是因为 Firefox 不支持 mp4。至少不是在mac os上，在windows上我认为是这样。您现在可以隐藏视频并在用户单击缩略图图像时显示和播放它。祝你好运。

试图在这里解释“Mee”发生了什么，只是为了其他可能遇到同样问题的人。在脚本末尾添加事件处理程序并不能保证该处理程序仅在其之前添加的所有其他事件处理程序之后才会执行。它可能成为为同一事件运行的最后一个处理程序，但其他事件的处理程序（例如上面代码中的 'loadeddata'）可能会在此处理程序之后运行。为什么？事件处理程序按照事件发生的顺序执行。对于那些使用事件处理程序的人来说，这听起来很明显，但对于那些刚刚开始事件驱动编码的人来说，这是一个常见的陷阱。

【参考方案3】：

使用 poster 属性是最简单的方法。从一开始就获取视频的预览图像正是它的设计目的。

http://www.w3schools.com/tags/att_video_poster.asp

尝试创建一个函数来动态抓取视频的另一段以用作海报，这无疑会给客户端带来更多的延迟和开销，从而对用户体验产生负面影响。

【讨论】：

请不要链接来自 W3Schools 的任何内容，他们只是为了盈利而从 Mozilla 开发者网络复制内容。

@HypolitePetovan 我不同意你的观点。虽然对 W3Schools 的批评通常是当之无愧的，但它也经常被带到极端，就像您在此处的评论一样。是的，W3S 远非学习编码的理想来源，尤其是现在，而且充满了过时且有时不正确的信息。但是你说他们只是从 MDN 复制内容是荒谬的。事实上，我认为 MDN 的格式一开始就深受 W3School 的启发。我认为在过去它是一个非常有用的资源，并且它的一些内容今天仍然存在。

我不应该对 W3Schools 公平，他们选择发布不正确的信息并积极投资于 SEO 以获取利润。正确的链接应该是developer.mozilla.org/en-US/docs/Web/html/Element/…

您发布的链接上的描述无论如何都无法回答OP的问题。所以不知道为什么这甚至有赞成票。

【参考方案4】：

我是这样做的：

如果currentTime为15则跳转到0，但播放时会超过15s标记

html:

<video id="video1" src="path/to/video#t=15" onplay="goToStart()"  controls ></video>

javascript：

function goToStart()
    if (document.getElementById('video1').currentTime == 15)
    document.getElementById('video1').currentTime = 0;
    

【参考方案5】：

将#t=15 添加到您的视频源中，如下所示

<video   controls>
  <source src="video.mp4#t=15" type="video/mp4">
</video>

这将在 15 秒后开始播放视频。

【讨论】：

这不能回答问题。

视频从第 15 秒开始，缩略图在移动设备上不可用。