html5-video - HTML5 ビデオをカバーするボタンを表示

Question

クリックするとビデオが開始されるhtml5ビデオ全体をカバーする再生ボタンを表示したいと思います。これは可能ですか？

ありがとう！

Answer 1

ボタンをクリックしたときにビデオが再生されるという問題がある場合は、これを簡単に確認してください。ビデオを JavaScript で取得し、play関数を呼び出すだけです。ボタン部分については、css を使用して div でビデオをラップし、cssdisplay:inline-block; position:relativeを使用して<button>タグでラップするだけで、次のposition:absolute; top:50%; left:50%;ようになります。

<div style="position:relative;">
<button style="position:absolute; top:50%; left:50%;" onclick="playPause(); return false;">Click to start</button>
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div>