html5 海报大小可以变化以用作小缩略图吗？答案

【问题标题】：Can html5 poster size be varied for use as small thumbnail?html5 海报大小可以变化以用作小缩略图吗？
【发布时间】：2017-08-06 06:22:49
【问题描述】：

我想使用 html5 video poster 属性为 Joomla 页面上的视频设置缩略图。我正在使用这个标记：

<video width="100%" height="100%" poster="/templates/beez_20/images/ws_wst2.png" controls> 
<source src="/templates/beez_20/video/ws_wst2.webm" type='video/webm;codecs="vp8, vorbis"'/>
      </video>

这可以正常工作，但海报图像显示的尺寸与视频相同，这违背了拥有缩略图的目的。 SO 页面“如何在 HTML5 视频上设置缩略图？”是主题，但没有解决缩略图大小问题。我不知道这是否可以使用海报属性来实现。如有必要，我很乐意使用 js 或 jquery。任何帮助将非常感激。

【问题讨论】：

海报总是会尝试显示缩放以匹配视频元素的图像。如果您想显示不同大小的内容，则需要控制叠加层（通过 CSS 显示/隐藏元素）
@Offbeatmammal 谢谢，我一直在尝试通过 jquery 代码控制视频的显示，但没有成功。你能指出如何用 CSS 做到这一点
不是 100% 确定我理解你想要做什么......你能举一个更好的例子来说明你想要实现的目标吗......
@Offbeatmammal，我正在尝试使用海报图像（视频中的一帧）作为视频的缩略图，以便在单击缩略图时显示视频。我已经将“缩略图”理解为表示较小的图片（例如 Youtube 中的图片），这就是我的目标。不知道能不能做到。
那么，你想要比你点击的视频更小的东西，然后加载更大的视频元素本身？

标签： jquery html video

【解决方案1】：

根据我认为我理解的您的要求，这将显示可以设置为一种尺寸的图像，然后单击时将显示并开始播放较大的视频元素。当视频暂停或结束时，它将恢复显示图像（仅显示逻辑流程）。暂停和恢复时，视频将从同一位置继续播放。

<html>
<head>
</head>
<body>

<div id="videoContainer">
<div id="thumb"><img src="https://obm.one/images/lizard_goldeye.jpg" onclick="vidPlay()"></div>
<div id="vidContainer" style="display:none"><video id="video" src="http://techslides.com/demos/sample-videos/small.mp4" mute controls>
</div>

<script>
thumb = document.getElementById("thumb")
vidContainer = document.getElementById("vidContainer")
video = document.getElementById("video")
video.addEventListener("pause",vidPause)
video.addEventListener("end",vidPause)
function vidPlay() {
    thumb.style.display = "none"
    vidContainer.style.display = "inline"
    video.play()
}

function vidPause() {
    console.log("bobby")
    thumb.style.display = "inline"
    vidContainer.style.display = "none"    
}
</script>

<body>

【讨论】：