HTML5 плеер на сайте

Дата: 29 мая 2015 09:50 #1

HTML5 плеер на сайте

Для эксперимента включили HTML5 плеер на сайте (используется открытый Video.JS). Так как баги и глюки не избежны, оставлена возможность переключиться на старый плеер. Переключалка доступна над плеером.

Плюсы:
1) Видео играется непосредственно браузером, что ускоряет работу
2) Не требуется дополнительный Flash плагин
3) Нет проблем с дёрганностью картинки в видеороликах на скролингах + поддержка 60FPS
4) Гораздо легче настраивается дизайн проигрывателя и легко добавляются новые фичи

Что сейчас есть:
1) Проигрываетль автоматически растягивается на всю ширину доступного ему экрана (избавились от переключалок разрешения)
2) Сохраняется выбор ползунка звука и источника (SD или HD)
3) Переключение на проигрывание с Youtube сделано в том же месте где выбор SD и HD.
4) Кнопка Embed сделана прямо на проигрывателе
5) Есть поддержка SRT-субтитров
6) Дизайн дефолтного плеера слегка изменен. Панель управления сделана статичной, есть вариант сделать её скрывающейся если нет фокуса на проигрывателе.
7) Плеер интернациональный (добавлена руссификация)

Известные баги/недочеты:
1) В некоторых браузерах не играются HD-Файлы
2) При переключении на Youtube значение ползунка звука не учитывается, приходится двигать после переключения
3) Мне не нравится как работает выбор места начала воспроизведения и как работает буферизация. После старта видео при недостатке буферизации начинает играться, а потом замирает, что бы буферизовать побольше. Вместо того что бы начать играть только когда видео будет уже готово, что бы играться без рывков. Есть подозрение, что это особенность браузеров.
4) На паузе видео продолжает загружаться.

Планы на будущее:
1) Полностью переехать на HTML5 и отказаться от поддержки Flash
2) Переделать на HTML5 в том числе избранное и встройку на другие сайты (после обкатки)
3) Переделать дизайн плеера для улучшения юзабилити. Например, мне не нравится кнопка переключения HD/SD, на старом плеере она была более очевидна. Есть желающие помочь с дизайном (HTML + JS + CSS)?
4) Пофиксить все известные баги

Технологию только начинаем обкатывать - глюки неизбежны, пожалуйста пишите об них здесь. В идеале если вы будете писать ещё версию вашего браузера и операционку. Спасибо!
Дата: 29 мая 2015 10:16 #2
У меня в полноэкранном режиме не убирается интерфейс плеера, и видео, стало быть, не заполняет весь экран. Что в фаерфоксе, что в хроме.
Дата: 29 мая 2015 10:25 #3
Siar_Mortal
Над этим работаем )

UPD: Fixed. Это оказалось не сложно.
Дата: 29 мая 2015 13:14 #4
Круто, правда видео все равно не разворачивается на весь экран.
И еще в этом плеере клипы почему-то светлее, чем должны быть.
Дата: 29 мая 2015 15:59 #5
Siar_Mortal
У меня монитор не 16х9, не заметил. Сейчас должно быть ок.

По поводу светлости ничего сказать не могу. Видео играется встроенными в браузер средствами, надо гуглить. Есть несколько тем:
http://help.videojs.com/discussions/problems/832-video-playing-too-lightwashed-out
http://yttalk.com/threads/videos-are-too-bright.134294/

Пишут что проблема с Color Space: 16-255. На твоем скрине как раз черный RGB(16,16,16). Универсального решения пока похоже нет.

Добавлено спустя 25 минут 5 секунд:

У меня кстати такой проблемы нет:

Дата: 29 мая 2015 16:13 #6
Да, теперь разворачивается, а светлоту я починил способом по второй ссылке, спасибо.
Дата: 29 мая 2015 17:50 #7
у меня IE 10 и порой не загружается сам плеер, а изменение режимов ни чего не даёт
Религия и Религиозные ценности понятия разные
Дата: 30 мая 2015 06:59 #8
KISfly
То есть ты кликаешь на Flash и потом перегружаешь страницу и у тебя не Flash?
Дата: 30 мая 2015 16:53 #9
На примере этого клипа: http://amvnews.ru/index.php?go=Files&in=view&id=06239
По сути субтитры считаю удобным дополнением, они не должны сильно отвлекать от того что происходит на экране^^
В старом плеере субтитры выглядят намного аккуратней, занимали меньше места и не были такими навязчивыми Smile
В новом плеере появился тёмный фон, который дополнительно отвлекает и сильно палит косяки тайминга, что печально(
Ещё субтитры скачут вверх при наведении на плеер там где общий поток загрузки показан: наведение на плеер показывает длину загрузки - при этом пока есть активность полоса становится шире и подымает сабы ещё выше чем они есть Surprised .
В полно экранном режиме сабы дико огромные Shocked , хоть и использовались заглавные буквы, но в старом плеере они не были настолько огромны
И я так понимаю новый плеер также формат .ass не поддерживает?, печально если так, а хотелось бы чтоб тянул и избавиться бы уже от .srt
Дата: 30 мая 2015 18:01 #10
как-то напрягает такой огромный размер плеера.
Дата: 31 мая 2015 09:09 #11
Так же доступны быстрые клавиши как и в старом плеере
вверх - вниз = изменение звука +/-
M = выключить/включить звук
вправо - влево = передвижение по видео
R = начать с начала
Пробел = пауза/плей
F = фуллскрин on/off
0-9 = промотка в % соотношении
Дата: 31 мая 2015 22:06 #12
Turbo:
KISfly
То есть ты кликаешь на Flash и потом перегружаешь страницу и у тебя не Flash?

не совсем, мне выдает надпись: скачайте Flash player. Но на главной странице сайта вложенные клипы работают нормально. Захожу на какую ни будь страницу клипа и все плеера нет.
http://gyazo.com/7478928214470a2808f4a83eed9b7964
Религия и Религиозные ценности понятия разные
Дата: 31 мая 2015 23:20 #13
KISfly
Да включился режим Flash он он почему-то не работает. Странно. Вот бы ещё консоль JavaScript посмотреть. Почти уверен что там какие-то ошибки. Надо бы посмотреть )
Дата: 01 июня 2015 07:18 #14
Полностью поддерживаю переход на HTML5.
Дата: 01 июня 2015 08:04 #15
Чуть-чуть подправили дизайн:
1) Убрали ромбовидный ползунок
2) Сделали саму полоску прогресса чуть пошире что бы по ней было легче попадать и поменяли цвет на поярче
3) Сабы теперь не скачут и их размер не увеличивается на фулскрине.
Чтобы писать в форуме, нужно войти.
Вход