【Web開発応用】動画再生4つの手法と使い分け

<video src="sample.mp4" controls autoplay loop></video>

<video id="myVideo" src="movie.mp4" width="640" controls></video>

<script>
  const video = document.getElementById("myVideo");
  video.play();        // 再生
  video.pause();       // 一時停止
  video.currentTime = 10; // 10秒地点へ移動
  video.volume = 0.5;  // 音量50%
</script>

<button onclick="video.play()">▶ 再生</button>
<button onclick="video.pause()">⏸ 一時停止</button>
<button onclick="video.currentTime = 0">⏮ 最初に戻る</button>

video.addEventListener("ended", () => {
  alert("動画が終わりました！");
});

<video id="myVideo" src="web-video-sample-01.mp4" style="display:none" muted autoplay></video>
<canvas id="myCanvas" width="640" height="360"></canvas>

<script>
  const video = document.getElementById("myVideo");
  const canvas = document.getElementById("myCanvas");
  const ctx = canvas.getContext("2d");

  video.addEventListener("play", () => {
    function drawFrame() {
      if (!video.paused && !video.ended) {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // 動画のフレームを描画
        requestAnimationFrame(drawFrame); // 次のフレームを予約
      }
    }
    drawFrame(); // 再生開始と同時に描画ループ開始
  });
</script>

ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
let frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
let data = frame.data;

for (let i = 0; i < data.length; i += 4) {
  const avg = (data[i] + data[i+1] + data[i+2]) / 3;
  data[i] = avg;     // 赤
  data[i+1] = avg;   // 緑
  data[i+2] = avg;   // 青
}

ctx.putImageData(frame, 0, 0);

<video id="myVideo" src="web-video-sample-01.mp4" autoplay loop muted></video>
<canvas id="myCanvas"></canvas>

// 初期設定
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// 動画テクスチャ
const video = document.getElementById('myVideo');
const texture = new THREE.VideoTexture(video);

// 3Dオブジェクト（例：平面）
const geometry = new THREE.PlaneGeometry(4, 2.25); // 16:9比
const material = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

// カメラ配置
camera.position.z = 5;

// アニメーションループ
function animate() {
  requestAnimationFrame(animate);
  plane.rotation.y += 0.005;
  renderer.render(scene, camera);
}
animate();

<script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script>

<video width="300px" id="myVideo" src="web-video-sample-01.mp4" autoplay loop muted></video>
<canvas id="myCanvas"></canvas>

<script type="module">
  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.module.js";

  // 初期設定
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("myCanvas") });
  renderer.setSize(window.innerWidth, window.innerHeight);

  // 動画テクスチャ
  const video = document.getElementById("myVideo");
  const texture = new THREE.VideoTexture(video);

  // 3Dオブジェクト（例：平面）
  const geometry = new THREE.PlaneGeometry(4, 2.25); // 16:9比
  const material = new THREE.MeshBasicMaterial({ map: texture });
  const plane = new THREE.Mesh(geometry, material);
  scene.add(plane);

  // カメラ配置
  camera.position.z = 5;

  // アニメーションループ
  function animate() {
    requestAnimationFrame(animate);
    plane.rotation.y += 0.005;
    renderer.render(scene, camera);
  }
  animate();
</script>

<video src="video1.mp4" width="320" controls></video>
<video src="video2.mp4" width="320" controls></video>

const videos = document.querySelectorAll("video");
videos.forEach(video => {
  video.muted = true;
  video.play();
});

<video id="mainVideo" width="640" controls></video>
<button onclick="switchVideo('video1.mp4')">動画①</button>
<button onclick="switchVideo('video2.mp4')">動画②</button>

<script>
function switchVideo(src) {
  const v = document.getElementById("mainVideo");
  v.src = src;
  v.play();
}
</script>

<canvas id="myCanvas" width="640" height="360"></canvas>
<video id="v1" src="video1.mp4" muted autoplay loop style="display:none"></video>
<video id="v2" src="video2.mp4" muted autoplay loop style="display:none"></video>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const v1 = document.getElementById("v1");
const v2 = document.getElementById("v2");
let useV1 = true;

function draw() {
  const video = useV1 ? v1 : v2;
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(draw);
}
draw();

// 5秒ごとに切り替え
setInterval(() => useV1 = !useV1, 5000);
</script>

const video = document.createElement("video");
video.src = "video1.mp4";
video.muted = true;
video.loop = true;
video.play();

const texture = new THREE.VideoTexture(video);
const material = new THREE.MeshBasicMaterial({ map: texture });

const geometry = new THREE.PlaneGeometry(16, 9);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 切り替え例
function changeVideo(src) {
  video.pause();
  video.src = src;
  video.load();
  video.play();
}