日別アーカイブ: 2018-10-16

マルチウィンドウYouTubeプレーヤー

YouTubeを自前で扱う

動画を作成してユーチューブに投稿すれば世界中の人々に見てもらえます。投稿規定を守れば投稿のための料金はかかりません。

投稿規定といっても公序良俗に反しなければ特に問題はないと思われます。

ユーチューバーに登録し精力的な活動をして思いがけないほどの閲覧者が現れて多額の広告収入が得られるかも知れません。

この記事はこれらから少し離れて、発表済みのユーチューブ動画をYouTube Player APIを用いて自前でYouTubeを取り扱うことを目指しました。JavaScriptの中に、公開されたAPIを呼んできめ細かな動画システムを作り上げることを目標にしています。

動画をマルチウィンドウで見る

YouTube Player APIの詳細な説明は『iframe 組み込みの YouTube Player API リファレンス』などに述べられており、参照させていただきました。また、『YouTubeプレーヤーAPIでYouTubeを複数設置する』では、YouTubeをマルチウィンドウで閲覧する例を具体的に解説されています。

ここでは、運動会シーズンに因んで、4台のカメラを集中して管理する運営本部が1台のカメラを特化して大画面で放映するような様を想定しています。

雰囲気だけですが、小学生が社会見学で訪れる右写真のようなテレビスタジオの副調整室を真似ています。

操作法

起動すると4画面が表示されます。それぞれ、画面中央の▶周辺をクリックするとライブ中継が開始されます。

4シーンを同時に描画することができます。❶~❹の白抜き数字をクリックすると数字の左側の画面が拡大されて描画されます。

元のマルチ画面に戻すには右下のホームボタンをクリックします。4画面は停止状態にあり、再生する場合は再びクリックします。

動作例と動作環境

4台のWebカメラによるインターネットライブカメラの作り方は難しくありませんが、にわかには準備できないのでネット上にある既存のものを使わせていただきました。



イベント会場のありさまをライブ配信するシステムを自作するには、Webサイト上で24時間ライブ配信を行う方法が参考になります。頑張ってライブ配信システムを構築して、運動会、野球、サッカー大会、ピアノ演奏会の模様を、いつも成長を見守ってくれる遠くの家族にオンライン中継することが可能になります。

モダーンブラウザではおおむね、思い通りの動作が得られましたがIE11ではしっくりしません。edgeの利用が望まれます。

4ライブカメラの設置場所

❶静岡市さった峠 広重の富士山
❷ミヤギテレビ情報カメラ・仙台マークワン屋上
❸カナダ・ケベック港
❹イタリア・ヴェニス港

世界で今、まさに起きているライブ風景を居ながらにして見ることができます。大画面に拡大して表示すれば、車や船の動きが一目瞭然です。

ライブ配信システム自作の薦め

インターネットにまつわる技術革新は秒進分歩(日進月歩)です。ライブ配信システムは手軽に自作できます。ウェブ上には自作集が山積みされています。

趣味の領域ならば2000円ほどのウェブカメラでも十分であり、使わなくなったスマホなどを利用すれば10000円以下で構築できるでしょう。

少しばかりのハードウェアの知識とHTML、JavaScriptによるプログラミングの知識やYouTubeの利用法はおいおい身に付くでしょう。