二つの動画を並べるウェブアプリを作ろう：横並び・ドラッグで並び替え・レスポンシブ対応

本サイトではアフィリエイト広告を利用しています

アプリ情報

現代のウェブ開発では、複数の動画を同時に表示し、ユーザーが自由に並べ替えられるアプリが人気を集めています。この記事では、二つの動画を並べるアプリの作成方法を、HTML、CSS、JavaScriptを活用して詳しく解説します。初心者の方でもステップバイステップで実装できるように、基本から応用までを網羅的に紹介します。動画コンテンツの魅力を最大限に引き出すために、横並び、縦並び、ドラッグアンドドロップによる並び替え、さらにはYouTube動画の埋め込みまでをカバーします。

なぜ二つの動画を並べるアプリが必要か

動画視聴のトレンドは、多画面同時再生へと移行しています。例えば、比較レビュー動画を作成する際、商品Aの動画と商品Bの動画を並べて表示すると、視聴者は視覚的に違いを理解しやすくなります。また、教育コンテンツでは、講師の解説動画と実演動画を並べることで学習効果が向上します。このようなデュアル動画表示は、ユーザーエクスペリエンスを大幅に向上させる鍵です。

さらに、ソーシャルメディアやブログで複数の動画を並べることで、滞在時間を延ばし、エンゲージメントを高める効果が期待できます。HTML5のvideo要素やiframeを活用すれば、ネイティブアプリ並みのスムーズな操作を実現可能です。以下では、具体的な実装手順を順を追って説明します。

基本的な二つの動画の横並び表示

まずは最もシンプルな方法から始めましょう。HTMLのvideoタグを2つ用意し、CSSのdisplay: flexを使って横並びにします。この方法は、軽量で高速に動作します。

<div class="video-container">
  <video src="video1.mp4" controls width="640" height="360"></video>
  <video src="video2.mp4" controls width="640" height="360"></video>
</div>

CSS部分では、コンテナにフレックスボックスを適用します。

.video-container {
  display: flex;
  justify-content: space-around;
  gap: 20px;
}

video {
  display: block;
}

このコードを実行すると、2つの動画が画面幅に合わせて横並びになります。gapプロパティで動画間の間隔を調整し、レスポンシブ対応のためmediaクエリを追加するとさらに便利です。例えば、モバイルデバイスでは縦並びに切り替えることができます。

@media (max-width: 768px) {
  .video-container {
    flex-direction: column;
  }
}

この基本形をマスターすれば、動画の枚数を増やしたり、サイズを調整したりするのも容易です。実際のプロジェクトでは、ローカルファイルだけでなく、URLからストリーミング動画を読み込むことも可能です。

縦並びと斜め配置のバリエーション

横並び以外にも、縦並びやクリエイティブな斜め配置が有効です。縦並びはdisplay: block;を活用します。

video {
  display: block;
  margin-bottom: 20px;
}

よりダイナミックにするために、nth-childセレクタを使って位置を微調整します。例えば、2つ目の動画を少し右にずらすと、視覚的なバランスが良くなります。

video:nth-child(1) {
  margin-left: 0;
}

video:nth-child(2) {
  margin-left: 5em;
  transform: rotate(-2deg);
}

これにより、単なる並列表示ではなく、アートディレクションを効かせたレイアウトが実現します。hoverエフェクトを追加すると、インタラクティブさが向上します。

video:hover {
  transform: scale(1.1);
  transition: 0.5s ease;
}

こうしたアニメーションは、ユーザーの注意を引きつけ、動画再生への動機付けとなります。複数の動画を扱うアプリでは、こうした視覚効果が差別化ポイントです。

YouTube動画を二つ並べる高度な埋め込みテクニック

ローカル動画だけでなく、YouTubeなどの外部動画を並べる場合、iframeタグが最適です。YouTube動画の共有ボタンから埋め込みコードを取得し、2つをコンテナに配置します。

<div class="youtube-container">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID1" 
          title="Video 1" frameborder="0" allowfullscreen></iframe>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID2" 
          title="Video 2" frameborder="0" allowfullscreen></iframe>
</div>

レスポンシブ対応のため、コンテナに相対位置とパディングボトムを指定します。これでアスペクト比を維持しつつ、幅100%で表示されます。

.youtube-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 48%;
  height: 100%;
}

さらに、自動再生やループ再生を追加したい場合、srcパラメータに?autoplay=1&loop=1を付け加えます。ただし、ブラウザのポリシーにより制限される場合があるので、muted=1も併用しましょう。複数の動画をプレイリストとして連動させるには、playlistパラメータを活用します。

これらのテクニックにより、プロフェッショナルな動画ギャラリーアプリが簡単に作れます。教育サイトやレビューサイトで特に有効です。

JavaScriptでドラッグアンドドロップによる動画並び替え

静的な並び替えを超えて、ユーザーがドラッグで動画を入れ替えるインタラクティブなアプリを作成しましょう。HTML5のDrag and Drop APIを使います。

まず、video要素にdraggable=”true”を追加します。

<div id="video-list" class="sortable">
  <video src="video1.mp4" draggable="true" controls></video>
  <video src="video2.mp4" draggable="true" controls></video>
</div>

JavaScriptでは、dragstart, dragover, dropイベントをハンドルします。

const videos = document.querySelectorAll('video');

videos.forEach(video => {
  video.ondragstart = (e) => {
    e.dataTransfer.setData('text/plain', e.target.id);
  };

  video.ondragover = (e) => {
    e.preventDefault();
  };

  video.ondrop = (e) => {
    e.preventDefault();
    const id = e.dataTransfer.getData('text');
    const draggedVideo = document.getElementById(id);
    e.target.parentNode.insertBefore(draggedVideo, e.target);
  };
});

このコードで、動画をドラッグしてドロップすると位置が入れ替わります。視覚フィードバックとして、dragover時にボーダーを強調すると使いやすくなります。

video.ondragover = (e) => {
  e.preventDefault();
  e.target.style.border = '3px solid blue';
};

video.ondragleave = (e) => {
  e.target.style.border = '';
};

これにより、ユーザーは直感的に動画の順序をカスタマイズ可能。プレゼンテーションアプリやプレイリスト管理に最適です。

ソート機能で自動並び替えを実現

ドラッグ以外に、ボタンクリックで昇順・降順ソートする機能も追加しましょう。動画のメタデータ（タイトルや再生時間）に基づいて並べ替えます。

まず、各videoにdata属性でソートキーを持たせます。

<video data-duration="120" draggable="true"></video>
<video data-duration="90" draggable="true"></video>

JavaScriptのソート関数を実装します。バブルソートのようにシンプルに比較を繰り返します。

function sortVideos(key, order = 'asc') {
  const container = document.getElementById('video-list');
  const videos = Array.from(container.children);

  videos.sort((a, b) => {
    const valA = parseInt(a.dataset[key]);
    const valB = parseInt(b.dataset[key]);
    return order === 'asc' ? valA - valB : valB - valA;
  });

  container.innerHTML = '';
  videos.forEach(video => container.appendChild(video));
}

ボタンで呼び出せば、再生時間順などに並び替わります。この機能は、動画ライブラリアプリで大活躍します。

高度なアニメーションとトランジション

並び替え時のスムーズなアニメーションを追加して、アプリのクオリティを上げましょう。CSSのtransitionプロパティを活用します。

.sortable video {
  transition: all 0.5s ease;
  opacity: 1;
}

.sortable video.sorting {
  opacity: 0.5;
  transform: translateX(50px);
}

JavaScriptでクラスをトグルします。

function animateSort() {
  videos.forEach(v => v.classList.add('sorting'));
  setTimeout(() => {
    videos.forEach(v => v.classList.remove('sorting'));
  }, 500);
}

これで、並び替えが視覚的に滑らかになります。scaleやrotateを組み合わせると、さらに魅力的なエフェクトが可能です。

レスポンシブデザインとモバイル対応

アプリを多様なデバイスで使えるよう、レスポンシブ化が不可欠です。CSS Gridを活用したフレキシブルなレイアウトを推奨します。

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

これで、PCでは2列、モバイルでは1列に自動調整されます。タッチイベントを追加して、モバイルでのドラッグをスワイプに置き換えます。

パフォーマンス最適化のポイント

複数の動画を扱う際、読み込み速度が重要です。lazy loadingを適用します。

<video loading="lazy" src="video1.mp4"></video>

preload=”metadata”でメタデータのみ事前読み込みし、再生時にフルロードします。また、Intersection Observer APIでビューポート外の動画を停止します。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.play();
    } else {
      entry.target.pause();
    }
  });
});

videos.forEach(video => observer.observe(video));

これらの最適化で、アプリの快適さが格段に向上します。

実用例：比較レビューアプリの構築

具体的な活用例として、商品比較アプリを考えます。2つの動画を並べ、サイドバイサイドで再生コントロールを同期させます。

video1.addEventListener('timeupdate', () => {
  video2.currentTime = video1.currentTime;
});

これで、両動画が同時に進行。レビュー動画にぴったりです。

拡張機能：プレイリスト連動と検索

さらに、検索ボックスで動画をフィルタリングしたり、プレイリストから動的に追加したりします。フィルタリングはArray.filter()で実装可能です。

セキュリティとアクセシビリティの考慮

アプリを公開する際、title属性やaria-labelを追加してスクリーンリーダー対応を。CORSポリシーに注意し、信頼できるソースのみ使用します。

まとめ

この記事で紹介した手法を活用すれば、二つの動画を並べるアプリを簡単に作成できます。基本の横並びからドラッグソート、アニメーションまでを組み合わせることで、高度なインタラクティブアプリが実現します。ウェブ開発の楽しさを味わいつつ、ユーザーにとって価値あるツールを提供しましょう。

二つの動画を並べるウェブアプリを作ろう：横並び・ドラッグで並び替え・レスポンシブ対応をまとめました

HTML、CSS、JavaScriptの力を借りて、二つの動画を自由に並べ替えるアプリは、コンテンツクリエイターの強力な味方です。今日から実装を試み、創造性を発揮してください。さらなるカスタマイズで、無限の可能性が広がります。