【初心者向け】 YouTube Live マルチ配信表示システム

概要

このアプリケーションは、YouTubeライブ配信を画面の四隅に表示するWebページを作成します。ユーザーが入力した動画URLを保存し、再訪時に自動で読み込むことで利便性を向上させます。

画面構成

1. 動画入力UI

   • 動画のURLを入力するフォーム。

   • 保存ボタンを押すと動画URLをローカルストレージに保存し、フォームを非表示にする。

   • 入力UIは初期状態で表示されるが、設定されたURLがある場合は非表示になる。

2. 動画表示エリア

   • 画面の四隅に動画を配置。

   • 各エリアは`iframe`でYouTube動画を埋め込む。

3. 設定表示ボタン

   • 画面下部に表示。

   • ボタンを押すと動画入力UIを再表示する。

機能仕様

入力フォーム

• 動画URLを入力するテキストボックスが4つ存在する。

• URLはローカルストレージに保存され、次回アクセス時に再利用可能。

動画表示

• 各動画エリアに対応するYouTube動画を埋め込む。

• 入力されたURLから動画IDを抽出して`iframe`に適用。

• 動画は自動再生とミュート状態で開始。

ローカルストレージ

• 動画URLをキーとして保存。

• 初回アクセス時、または保存されたURLが存在する場合に動画を自動で設定。

UI制御

• `S`キーで設定表示ボタンの表示/非表示を切り替え。

• 設定表示ボタンを押すと動画入力UIを表示。

• 保存ボタンを押すと入力フォームを非表示に切り替え、動画を更新。

スタイル仕様

• 背景色: ダークテーマ（#121212）。

• 文字色: 白（#ffffff）。

• 強調色: シアン（#00ffff）。

• ボタン: ホバー時に明るいシアン（#00cccc）で色変化。

ファイル構成

• HTML:

  • ページ全体の構造を定義。

  • 各動画エリアや入力フォームの配置を設定。

• CSS:

  • レイアウトとスタイルを制御。

  • ダークテーマに適した配色を採用。

• JavaScript:

  • 動画IDの抽出、ローカルストレージとの連携、UI制御を実装。

使用する技術

• HTML5: 基本的な構造と要素。

• CSS3: レイアウトとデザイン。

• JavaScript: 動的な動作とローカルストレージの管理。

• YouTube埋め込みAPI: 動画の埋め込みと再生。

動作フロー

1. ページロード時、ローカルストレージから動画URLを取得。

2. 保存されたURLがある場合は、各動画エリアに動画を埋め込む。

3. ユーザーがURLを入力し保存ボタンを押すと、入力内容がローカルストレージに保存され、動画が更新される。

4. 必要に応じて設定表示ボタンで入力フォームを再表示。

サンプルソースコードを有料機能に入れておきます
開発資金のご協力よろしくお願いいたします