可以将html5海报大小作为小缩略图使用吗？

我想使用html5视频海报属性为Joomla页面上的视频设置缩略图。我使用这个标记：可以将html5海报大小作为小缩略图使用吗？

<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。任何帮助将非常感激。

来源

2017-08-06 RoyS

海报总是尝试显示缩放的图像以匹配视频元素。如果你想显示不同大小的东西，那么你需要控制覆盖（通过CSS显示/隐藏元素） – Offbeatmammal

@Offbeatmammal谢谢，我一直试图通过jquery代码来控制视频的显示，但没有成功。你能指出如何做到这一点与CSS – RoyS

不是100％确定我明白你在做什么...你能举一个更好的例子，你正在努力实现什么...... – Offbeatmammal

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

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

来源

2017-08-09 11:08:48 Offbeatmammal

回答

相关问题