Webページに動画を埋め込む：HTML5とjQueryで実現する再生/一時停止、シークバー、ミュート/ミュート解除機能

2024-06-05

jQueryを使ってHTML5動画を再生/一時停止する方法

必要なもの

jQueryライブラリ
HTML5動画ファイル

手順

HTMLに<video>タグと、再生/一時停止ボタンを追加します。

<video id="myVideo" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<button id="playButton">再生</button>
<button id="pauseButton">一時停止</button>

jQueryを使って、ボタンクリック時に動画を再生/一時停止します。

$(document).ready(function(){
  $("#playButton").click(function(){
    $("#myVideo").play();
  });

  $("#pauseButton").click(function(){
    $("#myVideo").pause();
  });
});

解説

$(document).ready(function(){}) は、DOMが読み込まれた後に実行されるコードを記述する場所です。
$("#playButton").click(function(){}) は、#playButton要素がクリックされた時に実行される関数を定義します。
$("#myVideo").play(); は、#myVideo要素の動画を再生します。

CSSでボタンを装飾

#playButton, #pauseButton {
  padding: 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

補足

上記は基本的な例です。必要に応じて、コードをカスタマイズすることができます。
動画のミュート/ミュート解除、音量調整、シークバーの追加など、他の操作を追加することもできます。
jQuery UIを使うと、より簡単に動画プレーヤーを作成することができます。

jQueryを使ってHTML5動画を再生/一時停止するサンプルコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>HTML5動画を操作</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <video id="myVideo" width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <button id="playButton">再生</button>
  <button id="pauseButton">一時停止</button>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS

#playButton, #pauseButton {
  padding: 10px;
  background-color: #ccc;
  border: none;
  cursor: pointer;
}

JavaScript

$(document).ready(function(){
  $("#playButton").click(function(){
    $("#myVideo").play();
  });

  $("#pauseButton").click(function(){
    $("#myVideo").pause();
  });
});

説明

このコードは、video.mp4という名前の動画ファイルを再生します。
動画のサイズは640x360ピクセルです。
再生/一時停止ボタンは、CSSで装飾されています。

使い方

上記のコードを3つのファイル (index.html, style.css, script.js) に保存します。
ブラウザで index.html ファイルを開きます。
動画が表示され、再生/一時停止ボタンをクリックすると、動画が再生/一時停止されます。

カスタマイズ

動画ファイルの名前やサイズを変更できます。
ボタンのテキストやデザインを変更できます。

このサンプルコードを参考に、自分のニーズに合わせてカスタマイズしてみてください。

HTML5動画を再生/一時停止するその他の方法

<video id="myVideo" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<button id="playButton">再生</button>
<button id="pauseButton">一時停止</button>

<script>
  const video = document.getElementById('myVideo');
  const playButton = document.getElementById('playButton');
  const pauseButton = document.getElementById('pauseButton');

  playButton.addEventListener('click', () => {
    video.play();
  });

  pauseButton.addEventListener('click', () => {
    video.pause();
  });
</script>

このコードは、JavaScriptのみを使って動画を再生/一時停止します。
video 変数には、#myVideo要素への参照が格納されています。
playButton と pauseButton 変数には、それぞれボタン要素への参照が格納されています。
addEventListener メソッドを使って、ボタンクリックイベントにリスナーを登録しています。
リスナー関数は、動画の play() または pause() メソッドを呼び出して、動画を再生/一時停止します。

<video> タグの属性を使う

<video id="myVideo" width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

このコードは、<video> タグに controls 属性を追加することで、再生コントロールを表示します。
再生コントロールには、再生/一時停止ボタンが含まれています。

Media Element Controls APIを使う

const video = document.getElementById('myVideo');

video.play();

video.addEventListener('play', () => {
  console.log('動画が再生されました');
});

video.addEventListener('pause', () => {
  console.log('動画が一時停止されました');
});