Привет. Была ли у вас когда-нибудь задача запустить на своем сайте видео в определенное время, с YouTube, например? Нужно ли было сделать так, чтобы опоздавший к началу пользователь смотрел с того момента, как смотрели все пользователи (которые начали смотреть с самого начала)? Скажу сразу, передо мной не стояла такая задача, но что-то пришло в голову и я решил попробовать сделать такую вещь.
По этому принципу можно создать «настоящий» онлайн-кинотеатр, где у опоздавших зрителей не будет другого выбора, кроме как продолжить просмотр фильма с текущего момента (в реальном кинотеатре ведь не просят перемотать фильм, правда?).
Все выглядит просто – приходит время показа, выключаем свет в зале, запускаем фильм.
Фильм заканчивается, включаем свет и выключаем проектор.
Как оказалось, это тоже довольно легко реализовать.
Для улучшения эффекта кинозала я взял соответствующую картинку с сайта deviantart. Спасибо автору, в PSD был слой с включенным и выключенным светом:
Как вы уже догадались, само видео будет располагаться на месте экрана.
На протяжении всего сеанса функция будет вызываться раз в секунду для проверки текущей даты.
Если до начала шоу осталось меньше 10 секунд, выключите свет в зале (уберите один фон в FadeOut()) и запустите видео (с помощью YouTube API).
Когда до конца фильма останется меньше 10 секунд, мы начнем постепенно включать свет — вернем затемненный фон на место с помощью FadeIn().
Для опоздавшего зрителя мы переключим видео ровно на то количество секунд, на которое он опоздал.
А чтобы пользователь не обманул и не передвинул ползунок в начало, мы отключим управление, а также будем следить за состоянием видео - перед началом сеанса запретим начало воспроизведения, и во время шоу мы запретим нажимать паузу.
Единственное, чего не хватает, так это проверить, завершился ли сеанс, чтобы не создавать видео и не выключать/включать свет просто так.
Код JavaScript совсем не хитрый и анализировать его здесь, думаю, нет смысла.
Если что, пишите в комментариях, разберёмся.
Вы можете увидеть, как это выглядит Здесь .
Укажите дату начала сеанса и идентификатор видео с YouTube (именно идентификатор, а не URL).
Время отображается в вашем часовом поясе.
P.S.: Я вообще не умею вёрстывать, поэтому пришлось позиционировать все элементы с помощью позиции:absolute, за что прошу прощения.
Наслаждайтесь просмотром! Скачать архив бесплатно и без СМС.
Теги: #youtube #кино #разработка сайтов
-
Обзор Программы Microsoft Antispyware
19 Oct, 24 -
2Гис Показал Что-То Новое
19 Oct, 24 -
Ультраэдит 13.00
19 Oct, 24 -
Google Представил Новое Приложение «Камера»
19 Oct, 24