Canvas и HTML5 Реализация примеров функций видеоэкрана видеоэкрана

В течение этого времени я изучал холст.

Метод изготовления:

При использовании холста для выполнения этой функции экрана, мы должны сначала убедиться, что страница была загружена и завершена, чтобы она могла легко ее управлять. Если вы используете этикетку <Deague> непосредственно ниже:

 <Video Lo OGG> </video>

В моем «HTML5 и видео» браузер поддерживает предварительно загруженный прогресс и загрузку событий видео, что повлияет на воспроизведение видео и другие события. Таким образом, мы используем JS для построения видео для представления видео.

Таким образом, вы должны обратить внимание на введение видео.

Метод CanPlayType () должен передать параметр, этот параметр является форматом видео,

Обычно используемое значение: видео/OGG;

Видео/MP4;

Видео/Webm;

Или включить энкодеры:

Видео/OGG;

Видео/MP4;

Видео/Webm;

Возвращение: Указывает уровень поддержки веб -страницы: вероятно, -наиболее вероятно (вернуть это только тогда, когда входное значение содержится с помощью Encoder);

 Функциональный видеоипет (видео) {var return = ''; 'mp4';} else if (video.canplaytype ('video/ogg') == ', вероятно,' || video.canplaytype ('video/ogg') == 'может быть') {<br> retunty pe = 'ogg '; webm ';

Эта функция может определить формат поддержки браузера для видео.

После оценки формата поддержки браузера здесь, потому что я использую Chrome, мой браузер поддерживает видео в формате MP4, а затем мы динамически создаем видеотеги.

 var videoelem; Видеотип (VideoElem);

Поскольку мы хотим сделать здесь функцию экрана, простое видео не имеет интерфейса экрана, поэтому нам нужно скопировать его на холст и транслировать это видео на холсте, поэтому здесь мы сначала скрывают видео, чтобы скрыть (отображать: нет).

Теперь видео воспроизводилось в браузере. Как рисовать видео на холсте, здесь нам нужно использовать функцию. Использование функций DrawImage

1. DrawMage (IMG, X, Y): нарисуйте IMG в положении холста (x, y);

2. Drawmage (IMG, X, Y, ширина, высота): нарисуйте ширину ширины с высокой высотой, высотой;

3. Drawimage (IMG, SX, SY, Swidtht, Sheutce, X, Y, ширина, высота, высота): нарисуйте положение IMG (SX, Sy) в положении холста (x, y) ширины ширины, Шейт Хай, Шейс -скриншот, нарисуйте на холсте по ширине и высоту высоты.

Вышеупомянутое использование Drawmage.

Вернемся к скриншоту, мы теперь создали холст на браузер-contextVideo, а затем мы нарисуем видео здесь:

 ContextVideo.Drawimage (VieleElem, 0,0);

Затем мы можем увидеть изображение на холсте, но видео постоянно меняется, поэтому нам нужно использовать функцию SetInterval, чтобы продолжать рисовать в качестве источника.

 SetInterval (function () {<br> contextVideo, trailImage (VieleEm, 0,0); <br>}, 100)

Размер интервала времени здесь повлияет на то, будет ли воспроизведение видео карт.

На этом этапе мы перенесли видео на холст. Затем сделайте скриншот.

Здесь нам нужно нарисовать холст на холсте на странице, а затем использовать метод DrawMage, чтобы снова сделать снимок экрана.

 Контекст.

Этот код рисует первый холст ко второму холсту.

Сделайте кнопку, а затем свяжите событие Click.

Когда график вырезан, правая кнопка можно сохранить, а затем залить в PS, чтобы сделать смайлики.

Выше всего содержимое этой статьи.