Введение в плагин воспроизведения видео HTML5 video.js

video.js — очень популярный плагин для воспроизведения видео в формате HTML5. Он очень подходит для воспроизведения видео на мобильных терминалах (например, на веб-страницах WeChat). Он обладает мощными функциями, поддерживает переход на флэш-память и совместим с IE8. Официальный сайт: http://videojs.com/git&demo: http://files.cnblogs.com/files/stoneniqiu/video-js-5.11.4.zip

элементы управления представляют собой панель управления, prload: предварительная загрузка, а плакат представляет собой исходное отображаемое изображение. набор данных поддерживает использование json для установки некоторых параметров. Излишне говорить, что источник относится к субтитрам.

Вот так выходит, но на самом деле у нас другие потребности.

Вам необходимо применить js novtt, который находится в альтернативном файле демо-версии. Таким образом, выбор буквы не будет отображаться на панели управления видео. Конечно, вам больше не нужен элемент отслеживания на странице.

 <link href=~/js/video-js-5.11.4/alt/video-js-cdn.min.css rel=stylesheet /><script src=~/js/video-js-5.11.4/alt/ video.novtt.min.js></script>

Я начал настраивать его сам, используя CSS, но обнаружил, что ничего не работает. Видеоэлементы отличаются от обычных элементов тем, что им необходимо добиться гибкой ширины и высоты путем установки соотношения внутренних элементов. video.js предоставляет два метода.

js: установите для жидкости значение true.

 var player = videojs('video', { Liquid: true }, function () { console.log('Хорошо!'); this.play(); // если вы по какой-то причине не доверяете автозапуску } )

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

css: стили можно добавлять напрямую. Существует три типа: .vjs-fluid, .vjs-4-3, .vjs-16-9. Первый будет рассчитан автоматически, а два последних зададут соотношение. В стиле также необходимо установить начальную ширину и высоту для отображения изображения.

 <video id=video class=video-js vjs-default-skin vjs-fluid плакат=http://vjs.zencdn.net/v/oceans.png ширина=375 высота=200 элементы управления preload=none data-setup=' { html5 : {nativeTextTracks : false } }'> <source [email protected] type=video/mp4> <p class=vjs-no-js> Для воспроизведения видео необходимо включить JavaScript. Рекомендуется использовать <a href=http://videojs.com/html5-video-support/ target=_blank> браузер, поддерживающий HTML5<. /a> для доступа. </p> </видео>

Внимание к событию:

Обычно мы фокусируемся на трех событиях: начале, паузе и конце.

 var player = videojs('video', { }, function () { console.log('Хорошо!'); //this.play(); // если вы по какой-то причине не доверяете автозапуску }) ; player.on('play', function () { console.log('Начать/возобновить воспроизведение'); }); player.on('pause', function () { console.log('Приостановить воспроизведение'); }); player.on('закончено', function () { console.log('Завершено воспроизведение'); });

Также есть события обновления:

 player.on('timeupdate', function() { console.log(player.currentTime()); });

Вы можете определить, заканчивается ли видео, оценив, равны ли текущее время и общее время:

 player.on('timeupdate', function () { // Если currentTime() === period(), видео закончилось if (player.duration() != 0 && player.currentTime() === player .duration()) { // Конец воспроизведения} });

Некоторые пожилые люди отметили, что завершенное событие не запускается правильно на устройствах Android (сначала будьте готовы).

Настройка MIME iis по умолчанию не добавляет тип mp4. С локальным воспроизведением проблем не возникнет, но при достижении сервера возникнет ошибка 404. Для этого необходимо установить MIME в iis:

Добавляется формат flv со связанным расширением: .flv, тип контента: application/octet-stream.

Формат f4v имеет расширение: .f4v, тип контента: application/octet-stream.

Формат mp4 имеет расширение: .mp4, тип контента: video/mp4.

Формат ogv: расширение: .ogv, тип контента: video/ogg.

Формат webm: расширение: .webm, тип контента: video/webm.

Перезапустите iis после настройки, чтобы изменения вступили в силу.

Официальный представитель предоставил адрес codepen http://codepen.io/heff/pen/EarCt, который вы можете редактировать и играть с ним. В основном кнопка воспроизведения, панель управления и индикатор выполнения. По умолчанию такое же, как указано выше.

Еще есть такой: http://codepen.io/zanechua/pen/GozrNe SublimeVideo

Технология воспроизведения используется для воспроизведения видео или аудио файлов в браузерах или плагинах. Если это h5, будут использоваться элементы видео или аудио. Если это Flash, будет определен флеш-плеер. Не только флэш, но и поддерживает Silverlight, Quicktime и другие технологии воспроизведения. Настройка данных может быть определена непосредственно в элементе. Укажите поддерживаемые технологии.

 <video data-setup='{techOrder: [html5, flash, другая поддерживаемая технология]}'

Или используйте JavaScript:

 videojs(videoID, { techOrder: [html5, flash, другая поддерживаемая технология]});

Правилом по умолчанию здесь является то, что для игры будет использована первая технология, а в случае неудачи будут использованы последующие варианты. Например, если выше на первом месте написано html5, все видео будут воспроизводиться с использованием html5. Если мы хотим, чтобы flash имел приоритет, просто поставьте его впереди:

 data-setup='{ techOrder: [flash,html5] }'

В элементах страницы вы обнаружите, что video.js предоставляет нам используемый нами Flash-объект.

Добавьте атрибут autoplay к элементу видео или добавьте autoplay:true в js.

 <video id=автовоспроизведение видео плакат=/images/bk.png width=375 height=200 элементы управления preload=none > </video>

или

 var player = videojs('video', { autoplay:true }, function () { console.log('Хорошо!'); //this.play(); // Страховка, вы также можете активно вызывать play( ) });

Автовоспроизведение всегда раздражает, поэтому противоположный вариант — удалить атрибут автозапуска или установить для него значение false.

другой:

video.js поддерживает плагины-расширения, что очень удобно в использовании.

 //Определяем функцию плагина examplePlugin(options) { this.on('play', function (e) { console.log('воспроизведение началось!'); }); //Регистрируем videojs.plugin(' examplePlugin', examplePlugin // Используйте player.examplePlugin({ exampleOption: true });

API плеера можно вызвать напрямую внутри плагина. Есть плагин плейлиста, который вы можете изучить, если вам нужен плейлист. https://github.com/brightcove/videojs-playlist и http://videojs.com/advanced/ имеют следующий эффект:

Выше представлен плагин воспроизведения видео HTML5 video.js, представленный редактором. Надеюсь, он будет вам полезен. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам вовремя. . Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!