Мы настоятельно рекомендуем всем нашим клиентам установить это обновление и в настройках компонента выбрать "Тип плеера" - "videojs". Администраторы увидят соответствующее сообщение во всех местах, где будет выбран старый плеер ("Тип плеера" - "HTML5 / Flash плеер" ). Там, где было выбрано "определить автоматически", будет сразу применен новый тип плеера. Мы принудительно сделали замену, чтобы ускорить переход на новый плеер.
[spoiler]
Важный момент: Если у вас в системе скопирован шаблон компонента, то после установки обновления необходимо перейти на использование шаблона компонента по-умолчанию. Это связано с тем, что код отображения нового плеера находится в шаблоне, этот код автоматически не попадёт в ваши копии. В этом случае на месте плеера будет пустое место.
Сам по себе, video.js - это всего лишь javascript-обёртка для тега <video>. Мы лишь постарались сделать максимально удобным использование компонента и добиться максимальной совместимости.
Кстати, о совместимости. Здесь многое зависит от типа проигрываемого файла и браузера посетителя. Если браузер не поддерживает тип файла, то сам плеер ничего с этим не сделает. Кроме того, веб-сервер должен формировать правильный заголовок Content-Type, иначе плеер работать не будет.
Ниже таблица совместимости, полученная по результатам тестирования компонента в разных браузерах и разных операционных системах. Таблица достоверна на момент публикации статьи.
Таблица совместимости
Глядя на таблицу, становится ясно, что лучше всего использовать ролики с youtube - они будут работать на всех устройствах.
Для обеспечения лучшей совместимости, в теге <video> можно указать несколько файлов разного формата, в этом случае браузер будет идти от начала списка, пока не обнаружит тот файл, который он сможет воспроизвести. Наш компонент пока что не поддерживает этот функционал, всегда можно указать только один файл.
Теперь рассмотрим каждый из форматов отдельно.
1. mp4/m4v - если вы хотите проигрывать видео со своего сервера, то лучше использовать этот формат - он поддерживается лучше остальных. Не играет только в Opera на Windows
2. flv - аналогично mp4, но для его проигрывания требуется Adobe Flash Player, установленный на системе пользователя. Иначе проигрываться не будет. Если есть возможность использовать mp4-файл, то лучше не использовать flv
3. webm - поддерживается всеми современными браузерами (кроме Internet Explorer), а также устройствами на Android. К сожалению, не проигрывается в браузере Safari
4. ogv - аналогично webm, только ещё и на Android не будет работать.
5. m3u8 - потоковое видео по http-протоколу. Хорошо работает везде, кроме Internet Explorer и Opera на Linux.
6. youtube - везде воспроизводится, но с некоторыми ограничениями функционала компонента для мобильных устройств (подробности ниже)
7. vimeo - при использовании компонента с video.js вы можете вставить ссылку на vimeo.com. Будет работать с некоторыми ограничениями, и без мобильных устройств на iOS
8. mp3 - всеми любимый аудио-формат. Проигрывается везде, кроме браузера Opera для всех операционных систем
9. ogg - ещё один аудио-формат, не работает в Safari и Internet Explorer.
10. weba - аудио-формат, использует те же кодеки, что и webm. Но если вы хотите, чтобы проигрывалось видео, то следует использовать именно расширение .weba. Как и webm, не воспроизводится в Internet Explorer и Safari
11. wav - классика. Работает везде, кроме Internet Explorer.
12. m4a/aac - эти форматы можно использовать, но работают не всегда.
13. mov - этот формат поддерживается только Firefox. Но т.к. чаще всего под этим расширением скрывается обычный mp4-файл, мы принудительно проводим замену типа файла на mp4, в этом случае большинство браузеров проигрывают эти файлы.
Все эти ограничения пока что непреодолимы, т.к. зависят от браузера пользователя. Пожалуйста, если к вам обращаются ваши посетители с проблемами воспроизведения видео, свертесь сначала с этой таблицей. Если указано, что ролик должен проигрываться, а он не проигрывается - вот тогда можете обращаться в техподдержку.
Ограничения
Для достижения максимальной совместимости, на некоторых мобильных устройствах нам пришлось сознательно выключить часть функционала компонента.
1. Для всех мобильных устройств выключается опция автоматического запуска проигрывания видео. Это связано с запретом запуска проигрывания видео через javascript на мобильных платформах.
2. Для youtube-роликов на iOS-устройствах (iPhone / iPad) не отображается картинка-анонс. Как на видео, так и в плейлисте.
Есть ограничения, связанные с плейлистами. Они не зависят от платформы:
1. На данный момент не поддерживается отображение потоковое видео в плейлистах. Если у вас плейлист, и первым в списке идёт потоковое видео, то все остальные ролики будут принудительно вырезаны из плейлиста при отображении компонента. Останется только первый ролик, плейлист не будет отображаться. Если потоковое видео - не первое в списке, то оно будут принудительно вырезано из плейлиста. До обновления модуля fileman 17.0.4 это же действительно для роликов с vimeo.com.
2. В плейлисте не поддерживается одновременное проигрывание аудио и видео файлов. Если первым в списке идёт аудио файл, то все видео файлы будут вырезаны из плейлиста. Если первым в списке идёт видео файл, то все аудио файлы будут вырезаны из плейлиста.
Настройки компонента
1. Тип плеера. Здесь можно в явном виде указать тип плеера, который должен использоваться. Если оставить "Определить автоматически", то для wmv/wma файлов будет подключен WMV плеер, а для всех остальных файлов и ссылок - video.js. Так как плеер на основе video.js полностью перекрывает функционал старого jwplayer (называется HTML5 / Flash плеер), то при выборе этого плеера администратор видит предупреждающее сообщение с просьбой перейти на плеер на основе video.js. Со временем мы уберем возможность выбора jwplayer, а после удалим его из системы и принудительно заменим на video.js;
2. Использовать список воспроизведения. Если поставить галочку, то в качестве файла надо будет указать путь к файлу формата xml, где будет находиться плейлист. Формат плейлистов не изменился, старый будет работать аналогичным образом. Мы только убрали лишние поля оттуда - "Автор видео", "Продолжительность ролика". В компонент встроен удобный редактор для плейлистов. Пример плейлиста - в конце статьи;
3. Путь к файлу. Сюда надо занести путь к файлу, который будет обрабатываться компонентом. В качестве пути можно указать:
- выбрать файл из структуры;
- выбрать ролик из медиатеки;
- вставить ссылку на youtube.com / youtu.be (абсолютный путь с http:// или https://);
- вставить ссылку на vimeo.com (абсолютный путь с http:// или https://);
- вставить ссылку на потоковое видео формата m3u8 / ts (абсолютный путь с http:// или https://);
- публичную ссылку на файл на диске;
- ссылку на файл в облаке (абсолютный путь с http:// или https://);
- ссылку на файл на другом сайте (абсолютный путь с http:// или https://).
- после выхода обновления disk 17.0.5 можно будет вставить сюда публичную ссылку на медиафайл, который загружен на ваш диск.
5. Способ указания размеров.
- Абсолютные размеры. В поля "Ширина" и "Высота" необходимо ввести размеры блока в пикселях, которые должен принять тег <video>. В эти размеры включены размеры плейлиста и кнопок управления плеером. Всё, кроме чисел, будет отброшено. Если оставить поля пустыми или заполнить некорректно, то размеры установятся по-умолчанию - ширина 400 высота 300;
- Вписать в контейнер. Размер тега <video> примет размеры родительского контейнера. Для адаптивной верстки надо использовать именно этот вариант, ниже будут примеры;
- Подстроиться под размеры видео. Размер тега <video> будет соответствовать разрешению ролика. Эту опцию лучше использовать, если вам известны размеры видео и они вас удовлетворяют - при этом варианте не будет черных полос, всё пространство плеера займёт само видео. Эта опция недоступна при использовании плейлиста. Если вы вставляете ролик с youtube, то ширина плеера становится 400 пикселей, а высота подбирается автоматически, исходя из пропорций.
- выбрать файл из структуры;
- выбрать картинку из медиатеки;
- публичную ссылку на файл на диске;
- ссылку на картинку в облаке (абсолютный путь с http:// или https://);
- ссылку на картинку на другом сайте (абсолютный путь с http:// или https://).
8. Путь к папке со скинами. По аналогии с jwplayer вы можете использовать неограниченное количество скинов (сейчас доступно три). Для генерации скинов можно использовать готовый генератор - здесь можно отредактировать css, потом сохранить его на сайте. Необходимо указать путь к папке, где будет лежать этот css-файл. Если в скин входит не только css-файл, но и дополнительные файлы (картинки), то необходимо, чтобы файл стилей и папка скина назывались одинаково. Например, вы хотите назвать скин myskin, где будут стили и картинки. Надо создать папку myskin, в ней должен лежать файл myskin.css и любые дополнительные файлы. В этом css-файле основной класс для плеера должен называться vjs-myskin-skin. Подробнее про сами скины можно почитать на странице video.js ;
9. Скин. Если вы правильно создали скин и указали путь к папке с ним, то в этом поле можно будет выбрать ваш скин;
10. Автоматически начать проигрывать. Если установить эту галочку, то проигрывание видео начнётся сразу после загрузки страницы;
11. Настройки повторения. Если вы используете плейлист, то он всегда будет зациклен. Воспроизведение остановится только тогда, когда пользователь сделает это вручную. Без плейлиста вы можете включить или выключить повторение;
12. Уровень громкости в процентах от максимального. Необходимо указать число от 0 до 100;
13. Отключать звук при старте. Если поставить эту галочку, то при проигрывании звук будет выключен (независимо от того, какое число вы указали в настройке "Уровень громкости";
14. Время начала воспроизведения. Здесь можно в секундах указать место ролика, с которого должно начаться воспроизведение. Опция недоступна при работе с плейлистами. Также она не поддерживается при проигрывании flv-файлов, роликов с vimeo.com и потокового видео. Опция недоступна при установленной галочке "Автоматически начать проигрывать".
15. Скорость воспроизведения. Можно указать число от 0.1 до 3 - это будет множитель к скорости воспроизведения видео. Работает не всегда и не на всех устройствах. Не работает для flv-файлов.
16. Начинать загрузку видео сразу. Если поставить эту галочку, то бразуер начнет скачивать ролик сразу после загрузки страницы, до начала его воспроизведения. Если ролик не является центральной частью страницы и вы не уверены, что пользователь будет его просматривать, то лучше не ставить эту галочку;
17. Расширенный режим настройки компонента. Открывает часть настроек, по-умолчанию они скрыты;
18. Идентификатор плеера. Тут в явном виде можно указать идентификатор (атрибут id) тега video. К нему можно будет привязать стили / скрипты.
Если вы хотите использовать плеер для вывода плейлиста, треки которого собираются каким-то образом автоматически (из базы данных, других файлов и т.д.), то в этом случае есть возможность передать в компонент массив треков напрямую. При вызове компонента параметр "USE_PLAYLIST" должен быть "Y", а в поле "TRACKS" должен быть передан массив следующей структуры:
array ( array ( "title" => "", // название "src" => "", // путь "thumbnail" => "" // картинка для предпросмотра ), ... ) |
Примеры использования
1. Необходимо вставить один ролик заданных размеров на страницу.
- Если ролик есть на youtube, то вставляем ссылку на него в поле "Путь к файлу" (например, . Если ролика на youtube нет, то лучше использовать формат mp4. Если файл небольшой, то скачиваем его, заливаем на сайт, выбираем из структуры.
- Способ указания размеров - абсолютные размеры, указываем требуемую ширину и высоту в пикселях.
- Остальные настройки можно оставить по-умолчанию.
2. Необходимо вставить два ролика в двух плеерах, чтобы каждый из них занимал половину ширины экрана
- Создаем разметку на странице. Можно разделить экран на две части с помощью bootstrap, можно вручную. Например, так
<div style="width: 100%;"> <div style="width: 50%; float: left;"></div> <div style="width: 50%; float: left;"></div> </div>
- Вставляем в каждый блок по компоненту "Медиаплеер"
- Указываем пути к файлам, а тип "Способ указания размеров" - "Вписать в контейнер".
- Остальные настройки можно оставить по-умолчанию.
3. Необходимо вставить фоновое видео к какому-либо элементу. Например, сделать подложку к слайду, вставить фон на лендинг и т.д.
- У вас должна быть разметка, где один из блоков отвечает за формирование фона. Т.е. если вставить туда картинку с помощью тега <img>, то она встанет на фон.
- В этот фоновый элемент вставляем компонент "Медиаплеер"
- Указываем путь к файлу. Для этих целей лучше использовать mp4-ролики. Вы можете использовать ссылки на youtube или vimeo, но в этом случае у пользователя остаётся возможность остановить воспроизведение по клику. Кроме того, возможно наличие рекламы / сторонних элементов, присущих этим видеохостингам.
- Ставим галочку "Автоматически начать проигрывать". Помните, что на мобильных устройствах это галочка не работает, поэтому пользователи с них не увидят это видео.
- Уровень громкости ставим в 0, либо ставим галочку "Отключить звук при старте"
- "Настройки повторения" - ставим в постоянное повторение
- Чтобы этот блок нормально выглядел на мобильных устройствах, лучше поставить картинку для предварительного просмотра.
- "Показывать панель управления" - снимаем
- "Способ задания размеров" - "Вписать в контейнер"
В приложении полный php-код страницы для этого примера.
4. Вывести плейлист с аудио-файлами
- Ставим галочку "Расширенный режим настройки компонента"
- Ставим галочку "Использовать плейлист"
- В поле "Путь к файлу" пишем путь, где будет лежать наш плейлист. Например, /upload/audio.xml
- Нажимаем кнопку "Создать". Заполняем названия файлов и пути к ним.
- "Способ указания размеров" - "Абсолютные размеры".
- Ширину можно поставить в районе 600 пикселей. Высоту - около 100.
- Размер списка воспроизведения - установим на 300 пикселей, т.е. половина плеера будет занята плейлистом
- Количество строк в списке отображения - 5. Можно поставить и другое количество строк, но на 100 пикселях 5 строк читается хорошо.
Пример xml-файла
<?xml version="1.0" encoding="UTF-8"?> <playlist version="1" xmlns="http://xspf.org/ns/0/"> <trackList> <track> <title>1 bunny local</title> <location>/upload/SampleVideo_360x240_5mb.mp4</location> <image></image> </track> <track> <title>2 bunny web</title> <location>http://techslides.com/demos/sample-videos/small.mp4</location> <image>/upload/pexels-photo-286142.jpeg</image> </track> </trackList> </playlist> |
primer3.php
(1.09 КБ)
Что с браузером Edge?
В Edge точно проигрывается mp4, flv, 3gp, mp3, wav.
webm/weba и ogv/ogg - нет.
Т.е. относитель IE появилась только поддержка wav-файлов.