YouTubeをオンライン映画館にします

こんにちは。



たとえば、特定の時間に同じYouTubeからサイトでビデオを起動するタスクがありましたか? しかし、開始に遅れたユーザーが、すべてのユーザーが見ている瞬間から見るようにする必要がありました(最初から見始めました)。

目の前にそのような仕事はなかったとすぐに言わなければなりませんが、何かが私の頭を打ったので、私はそのようなことをしようとすることにしました。



この原則を使用すると、「実際の」オンライン映画館を作ることができます。遅い視聴者は、現在の瞬間から映画を見続けるしかありません(実際の映画館では、映画の巻き戻しを求められませんか?)。





すべてがシンプルに見えます-セッションの時間になり、ホールのライトをオフにして、フィルムを開始します。 フィルムが終了し、ライトをオンにし、プロジェクターをオフにします。 結局のところ、これの実装も非常に簡単です。



映画の効果を改善するために、deviantartで対応する写真を撮りました。 著者のおかげで、PSDにはライトのオンとオフのレイヤーがありました。





ご想像のとおり、ビデオ自体は画面上に配置されます。



セッション中、現在の日付を確認する関数が1秒に1回呼び出されます。 ショーの開始前に10秒未満しか残っていない場合は、ホールのライトをオフにし(fadeOut()で背景を1つ削除し)、ビデオを開始します(YouTube APIを使用)。 フィルムの最後まで10秒未満が経過すると、徐々にライトを点灯し始めます。フェードイン()を使用して、暗い背景を元の場所に戻します。



遅い視聴者のために、遅い時間とまったく同じ数秒間ビデオを切り替えます。 また、ユーザーがスライダーを最初にずらして移動させないように、コントロールをオフにします。また、ビデオのステータスを監視します-セッションの開始前に、再生の開始を禁止し、ショー中は一時停止をクリックしません。



不足している唯一のことは、セッションが終了したかどうかを確認することです。これにより、ビデオを作成せず、そのようにライトをオフ/オンにしません。



JavaScriptコードは完全にトリッキーであり、ここで分解する意味はありません。 どちらかといえば、コメントに書いて、我々は理解します。



ここでどのように見えるかわかります 。 セッションの開始日とYouTubeからのビデオID(つまり、URLではなくID)を示します。 時間はタイムゾーンで示されます。



PS:私はまったくタイプセットできないので、すべての要素を位置:絶対位置に配置しなければなりませんでした。



素敵な景色を!



SMSを使用せずにアーカイブを無料でダウンロードします。



All Articles