Question

我想使用html5视频海报属性在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视频上设置缩略图？”是关于主题的，但没有解决缩略图大小问题。我不知道这是否可以使用poster属性实现。如果有必要，我很乐意使用js或jquery。任何帮助将非常感激。

Answer 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>

可以将html5海报大小改为小缩略图吗？

1 个答案: