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

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

Привет всем.

Меня зовут. Никита северинов и эта лекция является продолжением курса по технологии html5 Video и привязка JavaScript в этой лекции мы рассмотрим позиционирование нашего времени относительно видео также позиционирование нашей громкости относительно видео снять приступ у меня открыть файл HTML в этом физике мы прописываем над кнопками Play папайрус и fullscreen ползунок Input Type Range прописать — это звонок у нас будет отображать времени как видео — это полоса прокрутки — это будет у нас иметь позвонок тривиальное название радио. Даня Я хочу его растянуть на всё видео поэтому ставлю ставила везде 400 пикселей и мне пока, что этого хватит по умолчанию конечно же ползунок у нас ты где-то вот тут да на самом деле у нас он будет потом начинается с начала действия.

Я хочу по первых воспроизвести — это действие в коробке.

То есть я. Передвигаюсь ползунок какую-либо точку и у меня видео позиционер именно на тот момент времени на миллисекунду на которой стоит сейчас ползунок и хочу сделать полное полное наименование битва имеет два ключевых событий — это он Mouse Down по нажатию клавиши и по отпуску клавиши onmouseup у этих двух событий будет совершенно две разные функции 1 функция при удержании кнопки моего так перетаскиваем в этот момент видел рнкб останавливается и потом приходить на нужно на точку при отпускании вот поэтому давайте мы — это всё сейчас я везу для начала. Давайте разберемся кино перемены будут нужны мы уже прописали наши функцию по воспроизведению видео функцию по выводу изображения в полноэкранный режим. Теперь давайте мы бежим уже нету перемена назовём duration которая будет отвечать когда позиционирование нашего ползунка здесь мы должны его проинициализировать так вот берём один наша ползунка рейтинг по умолчанию оставим здесь duration. всю там получается ну, а там у нас 0 пришло теперь сделаем следующем так как у нас значением и минимального не определена. Вы должны их задать для этого duration равняется нулю и. Макс Как ни странно равняется видео, что сейчас делал метод объекта видео под названием duration Java сейчас в виду отвечает за как бы возврат длины нашего века в секундах. То есть у меня максимальное значение будет иметь строится количество секунд всё просто. Вот я даже могу вам отобразить длину моего видео секунды конечно же. Ну вот только количество секунд теперь. После этого мне нужно задать некий чтобы — это всё работало интервал имеет в виду функция Set interval по анимации для этого мы напишем интервал — это под названием. Старт Греция и функции paypass видео после метода Play подпишем наш интервал функция я ещё не знаю какая будет. Поэтому опишу лишь нормальная анимирование 1030 оптимально решение для смены кадров. Давайте подпишем функцию солнышко допустим единиц. Греция Чита теперь после этого. Вот Каждый раз когда мы будем бегать в цикле мы должны всегда набрать значение нашего на видео и прикреплять — это значение K по звонку для этого из команда точнее метод видео называется runtime хорошо. всё сравняется видео. Count Time внимательно посмотрим вот на эту строчку значение нашего ползунка будет меняться. Когда меняется наш значение видео таксист мы должны очищаться наш интервал чтобы он дальше не продолжал за смотрим. У меня тоже надвигается то есть двигается видео ползунок двигается. Вите я его не могу никак. Галия Как мне — это сделать как мне привязать также значение праздника обратно к видео для этого пользуемся как раз нашей функции он маасдам событиям событие у нас будет анимейт. То есть я хочу в этом событии очищать мой интервал смотрим. Что у нас получается. Вы можете наблюдать то, что у меня полно спокойно при нажатии перемещается, но значение при этом видео применяется — это сделать так вот без событиям по отпуску клавиши onmouseup прописана ни на неё на — это событие шансон допустим френч функция муфта Ranch будет у нас прикреплять наша видео позицию видео комментарии меняется. и будет воспроизводить видео суток смотрим ну-ка. Вот вы видите. Да я сейчас перетаскиваю я работает до. Только не сразу у меня ещё видео останавливается. Давайте эту функцию также Professional влияние метро так. Интересно как же можно ещё правильно сделать так работает, но не работает когда я пытаюсь начать воспроизведение с ползунка передвигая вывести у меня он не хочет да то есть — это можно сделать так если у нас video.az то, тогда мои. Как сделать, а так работает сюда возненавидеть себя не останавливается позвонок прикрепили. Теперь остается нам сделать нашу громкость видео музыка переходим обратно в HTML файл заставлю ещё один зову его Input Type Range эд-20 возьмём точнее волнами так по умолчанию будет у меня 100% минимальная соответственно 0 максимальная 100 недостаточно. Вот наши громкость теперь по нажатию клавиши мы должны изменять громкость, но дело в том, что у меня анимируется — это не будет потому, что мне нужно. Нужен полностью зацикленное событие нужно полностью зациклена события. Какое событие есть у нас уже называется on Mouse Move. То есть я сказал, что у нас анимация не будет имел в виду то, что у нас не плавно громко смеяться. А как бы рывками после того чтобы у нас плавно всё менялся прописываем событие on Mouse Move bitch валим валим. Атак первым вставляя.

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

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