<video id="myVideo" controls>
<source src="video.mp4" type="video/mp4">
</video>
<button onclick="playPause()">再生/一時停止</button>
上記のコードでは、videoタグ内にcontrols
属性を追加しています。これにより、動画プレイヤーのコントロールバーが表示されます。
<script>
var video = document.getElementById("myVideo");
function playPause() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
</script>
上記のコードでは、playPause()
関数が定義されており、ボタンがクリックされたときに動画の再生状態を切り替えるようになっています。
この方法を使用することで、videoタグ内にボタンを追加して動画の再生や一時停止を制御することができます。他の操作(音量調整、シークバーの操作など)も同様に実装することができます。
以上が、HTMLのvideoタグでボタンを使用する方法のシンプルで簡単な解説とコード例です。