Обзор JavaScript библиотеки Video.js

Метки: /

В этой статье будет обзор и основы работы с JavaScript библиотекой Video.js, созданная для работы с видео и аудио.

Также, если вы читаете эту статью, то вам возможно будут интересны эти статьи.

Как подключить Video.js:

Для начала покажу как подключить Video.js, это можно сделать двумя способами, через CDN или NPM.

CDN:

При подключение через CDN, вы подключаете не только JS файл, но также и CSS.

Также, если вы хотите сделать поддержку IE8, то вам надо подключить вот это.

NPM:

Через NPM всё как всегда легко.

Это все способы которые есть.

Работа с Video.js:

Для начала, для примера, поработает с HTML.

Тут я не буду объяснять сам HTML, так, как статья не про это, но если вам что то не понятно, то прочитайте наш учебник про вёрстку.

Теперь перейдём к коду, изначально, у нас не будет кнопки плай/пауза или видио дорожки, добавлять это будим во время получения элемента <video>.

В этом не большом коде мы получаем элемент <video> по ID, а вторым параметром, идёт JSON массив с данными для видео, в нём, в нашем случае, добавил только «controls», то есть меню для управления видио, вот что получилась.

Как работает Video.js

Как видите, тут сразу есть настройка звука, видио дорожка и даже можете сделать видео на весь экран или на оборот в отдельном окошке, на мой взгляд тут есть всё что нужно.

Также надо сказать, что не обязательно задавать параметры в videojs(), можно их задать в качестве атрибутов, а в этой функции передать только ID элемента или даже можно получить его по querySelector(), например так.

Вывод:

В этой статье был написан обзор и основы работы с JavaScript библиотекой Video.js, конечно, это только очень маленькая часть от всей библиотеки, но тогда бы статья получилось бы очень большой, если она вас заинтересовала, то посмотрите документацию по ней.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: