-
動画の埋め込み: HTMLの
<video>
要素を使用して動画を埋め込むことができます。以下は基本的な埋め込みコードの例です。<video src="video.mp4" controls></video>
src
属性には動画ファイルのパスを指定し、controls
属性を追加することで再生コントロールが表示されます。 -
再生・一時停止・巻き戻し: ビデオを再生、一時停止、巻き戻しするためのコントロールボタンを追加することができます。以下はその例です。
<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
プロパティを使用して操作します。 -
音量調整: 音量を調整するためのスライダーを追加することもできます。以下はその例です。
<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>
要素のtype
をrange
に設定し、min
、max
、step
属性でスライダーの範囲と刻み幅を指定します。oninput
属性にJavaScriptを追加し、volume
プロパティを操作します。
これらはHTMLでビデオをコントロールするための基本的な方法の一部です。さらに高度な機能やカスタマイズも可能ですが、本記事では詳細は割愛します。詳細な情報はHTMLの公式ドキュメントやウェブ開発のチュートリアルを参考にしてください。