Html和javascript视频预览播放器

我有一个phpmyadmin数据库，其中存储了视频名称列表，我还有一个文件，存储了这些视频，所以我用php中名为

MYSQLI_FETCH_ASSOC

的函数将这些视频输出到前端，当这些数据通过该函数从服务器获取时，我创建的JavaScript函数将在它后面附加一个div标记。 我还有一个函数，当第一个视频数据成功时，该函数向服务器发送响应，服务器从数据库中获取另一个数据

所以我的问题是如何在视频标签中预览部分视频。 默认情况下，在页面加载完成后，视频标签会变成黑色，直到我单击它播放。 所以我希望它在页面加载完毕后显示部分视频，就像Facebook、Twitter、Instagram一样

视频标签

---

那么如何使视频显示部分视频数据呢？

您必须将

poster

属性添加到视频标记中。看

或者。。。如果视频在同一个域中，您可以使用该域从视频的任何帧创建海报

---

或者。。。您可以使用canvas捕获缩略图并进行解释。

我不需要海报，我希望显示原始视频内容，我已经尝试过poster您所说的原始视频是什么意思？在每个社交媒体中，你首先看到的只是视频中的一个图像（海报/缩略图），只有当你将其悬停或按“播放”时，才会加载实际的视频。你可能想从视频中自动获取缩略图，但这是一个完全不同的问题。那么如何从视频中获取缩略图呢？？？看看我对答案的编辑是否有帮助。

<video width="470" height="255" poster="placeholder.png" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    <object data="video.mp4" width="470" height="255">
    <embed src="video.swf" width="470" height="255">
    </object>
</video>

<video width="470" height="255" poster="placeholder.png" controls preload="metadata">
    <source src="video.mp4#t=0.5" type="video/mp4">        
</video>