HTML5ビデオプレーヤーの使い方

基本的なビデオの埋め込み: HTML5の

<video src="video.mp4" controls>
  Your browser does not support the video tag.
</video>

ビデオの制御オプション: ビデオプレーヤーには、再生、一時停止、音量調整などの制御オプションを追加できます。以下はその例です。

<video src="video.mp4" controls>
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <track kind="captions" src="captions.ja.vtt" srclang="ja" label="日本語">
  Your browser does not support the video tag.
</video>

ビデオのスタイリング: CSSを使用してビデオプレーヤーのスタイルをカスタマイズすることもできます。以下は例です。

<style>
  .video-player {
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>
<video src="video.mp4" controls class="video-player">
  Your browser does not support the video tag.
</video>

JavaScriptを使用した制御: JavaScriptを使用してビデオプレーヤーを動的に制御することもできます。以下は例です。

<video id="my-video" src="video.mp4" controls>
  Your browser does not support the video tag.
</video>
<script>
  var video = document.getElementById("my-video");
  video.play(); // ビデオの再生
  video.pause(); // ビデオの一時停止
  video.currentTime = 30; // ビデオを30秒の位置にシーク
</script>

これらはHTML5ビデオプレーヤーを使用するための基本的な例ですが、さらに多くの機能やオプションがあります。詳細については、HTML5ビデオに関するドキュメントやチュートリアルを参照してください。