小さなサムネイルとして使用するためにhtml5ポスターサイズを変更できますか？

私は、html5ビデオポスター属性を使用して、Joomlaのページのビデオのサムネイルを設定します。これはOK動作しますが、ポスターの画像はサムネイルを持つことの目的に反しビデオと同じ大きさで表示小さなサムネイルとして使用するために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ビデオにサムネイル画像を設定する方法」はトピックにありますが、サムネイルサイズの問題は解決していません。これがposter属性を使って達成可能かどうかわかりません。私は必要に応じてjsまたはjqueryを使用して満足しています。どんな助けでも大歓迎です。

出典

2017-08-06 RoyS

ポスターは、常にビデオ要素に合わせて拡大縮小された画像を表示しようとしています。異なるサイズのものを表示したい場合は、オーバーレイを制御する必要があります（CSSで要素を表示/非表示にする）。 – Offbeatmammal

@Offbeatmammalありがとう、私はjqueryコードでビデオの表示を制御しようとしていますが、。 CSS – RoyS

でこれを行う方法を指示できますか？私はあなたが何をしようとしているかを理解しています...あなたが達成しようとしているもののより良い例を与えることができますか？ – Offbeatmammal

あなたの要件として理解していることに基づいて、これは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>

出典

2017-08-09 11:08:48 Offbeatmammal

小さなサムネイルとして使用するためにhtml5ポスターサイズを変更できますか？

答えて

関連する問題