HTMLのビデオコントロールについてのガイド


  1. 動画の埋め込み: HTMLの<video>要素を使用して動画を埋め込むことができます。以下は基本的な埋め込みコードの例です。

    <video src="video.mp4" controls></video>

    src属性には動画ファイルのパスを指定し、controls属性を追加することで再生コントロールが表示されます。

  2. 再生・一時停止・巻き戻し: ビデオを再生、一時停止、巻き戻しするためのコントロールボタンを追加することができます。以下はその例です。

    <video src="video.mp4" controls>
     <button onclick="this.parentNode.play()">再生</button>
     <button onclick="this.parentNode.pause()">一時停止</button>
     <button onclick="this.parentNode.currentTime -= 10">10秒戻る</button>
    </video>

    ボタンのonclick属性にJavaScriptを追加し、play()pause()currentTimeプロパティを使用して操作します。

  3. 音量調整: 音量を調整するためのスライダーを追加することもできます。以下はその例です。

    <video src="video.mp4" controls>
     <input type="range" min="0" max="1" step="0.1" value="1" oninput="this.parentNode.volume = this.value">
    </video>

    <input>要素のtyperangeに設定し、minmaxstep属性でスライダーの範囲と刻み幅を指定します。oninput属性にJavaScriptを追加し、volumeプロパティを操作します。

これらはHTMLでビデオをコントロールするための基本的な方法の一部です。さらに高度な機能やカスタマイズも可能ですが、本記事では詳細は割愛します。詳細な情報はHTMLの公式ドキュメントやウェブ開発のチュートリアルを参考にしてください。