Превращаем Youtube В Онлайн-Кинотеатр

Привет. Была ли у вас когда-нибудь задача запустить на своем сайте видео в определенное время, с YouTube, например? Нужно ли было сделать так, чтобы опоздавший к началу пользователь смотрел с того момента, как смотрели все пользователи (которые начали смотреть с самого начала)? Скажу сразу, передо мной не стояла такая задача, но что-то пришло в голову и я решил попробовать сделать такую вещь.

По этому принципу можно создать «настоящий» онлайн-кинотеатр, где у опоздавших зрителей не будет другого выбора, кроме как продолжить просмотр фильма с текущего момента (в реальном кинотеатре ведь не просят перемотать фильм, правда?).

Все выглядит просто – приходит время показа, выключаем свет в зале, запускаем фильм.

Фильм заканчивается, включаем свет и выключаем проектор.

Как оказалось, это тоже довольно легко реализовать.

Для улучшения эффекта кинозала я взял соответствующую картинку с сайта deviantart. Спасибо автору, в PSD был слой с включенным и выключенным светом:

Превращаем YouTube в онлайн-кинотеатр



Превращаем YouTube в онлайн-кинотеатр

Как вы уже догадались, само видео будет располагаться на месте экрана.

На протяжении всего сеанса функция будет вызываться раз в секунду для проверки текущей даты.

Если до начала шоу осталось меньше 10 секунд, выключите свет в зале (уберите один фон в FadeOut()) и запустите видео (с помощью YouTube API).

Когда до конца фильма останется меньше 10 секунд, мы начнем постепенно включать свет — вернем затемненный фон на место с помощью FadeIn().

Для опоздавшего зрителя мы переключим видео ровно на то количество секунд, на которое он опоздал.

А чтобы пользователь не обманул и не передвинул ползунок в начало, мы отключим управление, а также будем следить за состоянием видео - перед началом сеанса запретим начало воспроизведения, и во время шоу мы запретим нажимать паузу.

Единственное, чего не хватает, так это проверить, завершился ли сеанс, чтобы не создавать видео и не выключать/включать свет просто так.

Код JavaScript совсем не хитрый и анализировать его здесь, думаю, нет смысла.

Если что, пишите в комментариях, разберёмся.

Вы можете увидеть, как это выглядит Здесь .

Укажите дату начала сеанса и идентификатор видео с YouTube (именно идентификатор, а не URL).

Время отображается в вашем часовом поясе.

P.S.: Я вообще не умею вёрстывать, поэтому пришлось позиционировать все элементы с помощью позиции:absolute, за что прошу прощения.

Наслаждайтесь просмотром! Скачать архив бесплатно и без СМС.

Теги: #youtube #кино #разработка сайтов

Вместе с данным постом часто просматривают: