В этой серии статей я буду изучать различные API-интерфейсы JavaScript, доступные для использования в среде браузера. Некоторые из них будут вам хорошо известны, другие могут быть для вас совершенно новыми. Надеюсь, в каждом разделе вы найдете новую информацию и полезные советы из реальной жизни! Итак, приступим.
Не только для YouTube
Если вы не использовали его раньше, возможно, вы даже не знаете о существовании Video API, или у вас может сложиться впечатление, что его можно использовать только для создания собственного видеопроигрывателя. Однако, если вам просто нужно встроить видео на свой сайт и вы не хотите создавать свой собственный необычный видеопроигрыватель, в Video API все равно есть что-то для вас!
Сохранение пользовательских настроек
Все параметры, доступные для HTML-тега видео, такие как autoplay, controls, loop и src, могут быть установлены с помощью JavaScript вместо HTML. Итак, представьте, что у вас есть автоматически воспроизводимое видео, но вы хотите, чтобы ваши пользователи отказались от этой, вероятно, раздражающей функции, вы можете сделать следующее:
Теперь вы показываете автовоспроизведение только для тех, кому нравится эта функция!
Воспроизведение видео правильного размера при подключении
Этот следующий вариант немного более конкретен и немного сложнее, но он имеет огромные преимущества, когда дело доходит до взаимодействия с пользователем. Вам придется поэкспериментировать с этим, чтобы найти правильный баланс для вас и ваших пользователей, но это должно стать хорошей отправной точкой.
Video API содержит набор событий, которые происходят в течение жизненного цикла видео. oncanplay, oncanplaythrough, onplay, onpause - все это примеры хороших событий жизненного цикла, которые можно использовать, но нас не беспокоит, когда что-то идет хорошо, мы хотим знать, когда видео не загружается должным образом.
Итак, мы будем следить за onstalled, onwaiting, onerror, чтобы мы могли внести изменения, когда эти события произойдут.
Когда мы получим событие onerror, мы дадим пользователю возможность перезагрузить видео. Когда у нас есть onstalled или onwaiting, мы собираемся проверить, случалось ли это раньше, сколько раз это происходило, и если это было слишком много раз, мы собираемся изменить src на видео с меньшим битрейтом.
Вот пример перезагрузки видео (или предоставления возможности сделать это) при ошибке:
Вот пример изменения src, когда видео загружается слишком часто:
Наконец, хороший ресурс для Video API - это http://www.w3schools.com/tags/ref_av_dom.asp.
Следите за новостями о JavaScript API!
Привет, я Джастин Фуллер. Я так рада, что вы прочитали мой пост! Я должен сообщить вам, что все, что я здесь написал, является моим собственным мнением и не предназначено для представления моего работодателя каким-либо способом. Все образцы кода являются моими собственными и никак не связаны с кодом Bank Of America.
Мне также хотелось бы услышать от вас, пожалуйста, свяжитесь со мной в LinkedIn, Github или Medium. Еще раз спасибо за чтение!
Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.
Чтобы узнать больше, прочтите нашу страницу о нас, поставьте лайк / напишите нам в Facebook или просто tweet / DM @HackerNoon.
Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!
