HTML5 Video. Создание своего плеера (Part I)

Автор Lyudmila Yeriomenko
HTML5 Video. Создание своего плеера (Part I)

Привет всем.

С вами. Никита северинов в этой видео лекции мы рассмотрим технологию html5, а именно так видео научимся при помощи джаваскрипт — это видео реализовывать свой видеоплеер. Итак перед вами я открыл два файла HTML и CSS соответственно в HTML файле у меня будет написано все-таки касаемо HTML affairs мой кот который будет реализовывать алгоритмы работы видеоплеер хочу сразу сказать то, что в этой видеолекция рассмотрены алгоритмы подхода в реализации они прописывание CSS для видеоплеера.

Давайте приступим видео которое будем брать за основу нашего Video Player — это трейлер из фильма.

Бэтмен Возвращение подобное сейчас вам его включу. Ну вот на основе этого видео мы будем делать и проверять наш плеер прописываем основные теги документы HDMI сразу же. Давайте подключим наш File with jest. После подключения предлагаю написать неудобства вы так давайте проверю только видела все версии dark. MP4 controls и ширина ширина постоянно суда вы 400. Закрываем на штык сейчас в браузере должна отобразится сама видела обновляем появился появился у меня Turbo с контрольными элементами по умолчанию теперь я хочу реализовать эти все контрольные элементы при помощи моих алгоритмов для начала. Давайте посмотрим как воспроизводить видео как вообще воспроизводить видео. Нажимаю на кнопочку создавая воспроизведения и нажимаю на ту же самую кнопочку создавая паузу. Давайте уберём в наш инструмент туба есть два варианта воспроизведения видео — это кликни мышкой по самому самому видео и кликанья мышки по кнопке. Давай сервисом этот Input Type Button Play. О чём — это так теперь станем функцию onclick. Пусть будет у меня Play pals видео посмотрим, что она скучно. Вот у меня появилась кнопочка при нажатии на которую у меня будет воспроизводиться видео тебе прикольно файл pdf для работы с видео мы должны происходить при помощи дом дом структура наш объект видео — это объём переменную видео — это событие загрузки страницы. Давайте приходим объект видео документ. Get Element by найди видео. Так давайте возить дачу поставь найди видео что-то. Я по умолчанию написал особой. Поставить уникальный идентификатор теперь все свойства нашего видео содержится в переменной видео — это упрощает работу с объектом нашу функция. Маус видео теперь для того чтобы реализовать алгоритм мы должны знать несколько свойств нашего объекта во-первых свойства пауст отвечает. Зато за проверку нас остановлено видео или нет имеет булевский результат. Ложь или правда есть метод Play который воспроизводит видео метод который останавливает видео легко догадаться как и, что мы будем делать условия если у нас видео. Омск То есть у нас остановлено видео. А мы должны его воспроизвести видео play-doh случае — это видео. Я хочу остановить видео House. А так смотри чтоб получилось сетка под дождем разновидность. Каштанов видео воспроизводится и останавливается воспроизводится останавливается работает отлично теперь я хочу прописать эту функцию по щелчку на самом видео для этого делаем аналогичное действие, но уже ставим onclick Navi обновляем смотри ждём всё отлично работает теперь помимо этой кнопочки давайте я отдельно запишу видео в отдельный div и мой собственный трубах. Я тоже. В отдельной div обновление ничего не изменилось разделитель да и так. Теперь давайте сделаем наверное посаженные действия хочу сделать так чтобы при нажатии на кнопочку у меня видео переходила в полноэкранный режим да давайте сделаем технологии для браузеров на vipkid технологии на основе этой технологии вы сделаете для других браузерах клятва ещё одну кнопочку будет называться Who Says half Screen обновляем по нажатию по нажатию этой книжки у меня будет происходить вывод экрана в полноэкранный режим для этого есть один метод который называется Bobcat in fullscreen описывается полноэкранный режим смотрим. Вот она не перешёл. Всё покажу вот так нажимаем и всё отлично. У нас показывается и так первая часть подошла к концу во второй части мы рассмотрим наиболее сложное действие — это привязка ползунка. С вами был. Никита северинов. Подписывайтесь Ставьте лайк. Всем пока.

0 комментариев
0

Читайте также