HTMLでビデオにテキストを書く方法

1. <video>要素と<div>要素を組み合わせる方法:

   <video controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
   </video>
   <div class="text-overlay">テキストをここに追加</div>

   CSSを使用して.text-overlayクラスをスタイル付けし、ビデオ上にテキストを表示することができます。

2. <canvas>要素を使用する方法:

   <video id="myVideo" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
   </video>
   <canvas id="textCanvas"></canvas>

   JavaScriptを使用して、<canvas>要素にテキストを描画することができます。例えば、以下のコードを使用してテキストを描画します:

   const video = document.getElementById('myVideo');
   const canvas = document.getElementById('textCanvas');
   const context = canvas.getContext('2d');
   const text = 'テキストをここに追加';
   
   canvas.width = video.videoWidth;
   canvas.height = video.videoHeight;
   
   context.font = '30px Arial';
   context.fillStyle = 'white';
   context.fillText(text, 10, 50);

これらはHTMLでビデオにテキストを書くための基本的な方法です。さらに高度なテキストエフェクトやアニメーションを追加する方法もありますが、ここでは簡単な方法に焦点を当てました。必要に応じて、これらの例をカスタマイズして利用してください。