В этой статье будет обзор и основы работы с JavaScript библиотекой Video.js, созданная для работы с видео и аудио.
Также, если вы читаете эту статью, то вам возможно будут интересны эти статьи.
Как подключить Video.js:
Для начала покажу как подключить Video.js, это можно сделать двумя способами, через CDN или NPM.
CDN:
При подключение через CDN, вы подключаете не только JS файл, но также и CSS.
1 2 | <link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet"/> <script src="https://vjs.zencdn.net/7.8.2/video.js"></script> |
Также, если вы хотите сделать поддержку IE8, то вам надо подключить вот это.
1 | <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> |
NPM:
Через NPM всё как всегда легко.
1 | npm install --save-dev video.js |
Это все способы которые есть.
Работа с Video.js:
Для начала, для примера, поработает с HTML.
1 2 3 | <video id="video-js" width="640"> <source src="./video/video.mp4" type="video/mp4"> </video> |
Тут я не буду объяснять сам HTML, так, как статья не про это, но если вам что то не понятно, то прочитайте наш учебник про вёрстку.
Теперь перейдём к коду, изначально, у нас не будет кнопки плай/пауза или видио дорожки, добавлять это будим во время получения элемента <video>
.
1 2 3 | videojs('video-js', { controls: true, }); |
В этом не большом коде мы получаем элемент <video>
по ID, а вторым параметром, идёт JSON массив с данными для видео, в нём, в нашем случае, добавил только «controls», то есть меню для управления видио, вот что получилась.
Как видите, тут сразу есть настройка звука, видио дорожка и даже можете сделать видео на весь экран или на оборот в отдельном окошке, на мой взгляд тут есть всё что нужно.
Также надо сказать, что не обязательно задавать параметры в videojs(), можно их задать в качестве атрибутов, а в этой функции передать только ID элемента или даже можно получить его по querySelector()
, например так.
1 | videojs(document.querySelector('#video-js')); |
Вывод:
В этой статье был написан обзор и основы работы с JavaScript библиотекой Video.js, конечно, это только очень маленькая часть от всей библиотеки, но тогда бы статья получилось бы очень большой, если она вас заинтересовала, то посмотрите документацию по ней.