Видео объединяется с холстом для реализации функции скриншота онлайн-видео.

Позвольте мне объяснить вам небольшую интересную демонстрацию, которую я видел несколько дней назад: скриншот видео в Интернете. Вот рендеринг после того, как я изменил и добавил новые функции:

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

В основном он разделен на три основные функции, первая из которых — первая:

Используйте объект URL, чтобы получить ссылку на видео и отобразить ее:

Объект URL в js имеет метод createObjectURL, который может получить URL-адрес файла (объект File), а затем вставить его в атрибут src элемента video, чтобы видео можно было отобразить. Конечно, существует несколько способов получить объект File, например, с помощью элементов ввода или перетаскивания. Полный фрагмент кода:

 <input type=file/>document.querySelector('input[type=file]').addEventListener('change',function () { document.querySelector('video').src = window.URL.createObjectURL(this. файлы[0])})

Конечно, я не написал это в исходном коде просто для демонстрации. Для более конкретного использования URL-адресов вы можете прочитать эту статью или MDN.

Следующий шаг является ключевым, но он также очень прост: использование метода холста drawImage. Если вы обратитесь к разделу 15.2.6 уровня 3, вы обнаружите, что использование метода drawImage описано в разделе 15.2.6. очень подробно, но его не хватает, то есть элемент видео также можно передать в метод drawImage и отрисовать графику. Конкретный фрагмент кода:

 var Canvas = document.createElement(canvas);var CanvasCtx = Canvas.getContext(2d);var video=document.querySelector('video'); //Устанавливаем координаты x, y и размер исходного изображения, и x целевого изображения, метка оси Y, размер. CanvasCtx.drawImage(video, 0, 0, videoWidth, videoHeight, 0, 0, imgWidth, imgHeight);//Закодируйте значок base64 в строку URL var dataUrl = Canvas.toDataURL(image/png);// Вставьте изображение в атрибут src document.createElement('img').src=dataUrl;

После рисования изображения вызовите метод холста toDataURl, чтобы преобразовать изображение в URL-адрес в кодировке Base64, который можно вставить в элемент img для отображения. Создание миниатюры изображения завершено. Что касается связи между картинками и base64, студенты могут прочитать эту статью.

Основной принцип реализации этой анимации: сначала создайте большую картинку того же размера, что и видео, в исходном месте видео, установите для нее абсолютный макет (position:absolut), создайте маленькую картинку там, где фактически находится миниатюра. и установите его на невидимый (видимость: скрыто), тогда большая картинка смещается влево и вверх, а ширина и высота уменьшаются до фактического места, где находится миниатюра, и формируется эффект анимации. Наконец, удалите большое изображение и отобразите маленькое. Конкретный фрагмент кода:

 function getOffset(elem) { var pos = {x: elem.offsetLeft, y: elem.offsetTop}; var offsetParent = elem.offsetParent; while (offsetParent) { pos.x += offsetParent.offsetLeft; .offsetTop = offsetParent.offsetParent } return pos;}

Эта функция предназначена для получения расстояния между маленьким изображением и областью просмотра (окном просмотра) и передачи его большому изображению в качестве параметра смещения. В разделе 12.2.3 уровня 3 имеется почти идентичный код с подробными инструкциями и альтернативной функцией getBoundingClientRect. Это тоже упоминалось, подробности читайте в книге.

Следующий код предназначен для создания больших и маленьких изображений и достижения эффектов анимации. Для удобства и простоты понимания я использую здесь JQuery.

 var $imgBig = $(<img/>);//Устанавливаем исходное положение большого изображения, которое является исходным видео. $imgBig.css({ позиция: абсолютная, слева: video.offsetLeft, сверху: video.offsetTop, ширина: video.offsetWidth+ px, высота: video.offsetHeight+ px}).attr(src, dataUrl);var $img = $ (<img/>);$img.hide();//Получите параметр расстояния маленького изображения, чтобы добиться эффекта анимации большого изображения. var offset = getOffset($img[0]);//Добавляем эффект анимации $imgBig.animate({ left: offset.x + px, top: offset.y + px, width: $img.width() + px, высота: $img.height() + px}, 500, function () { $img.show();});

Ну, вот и вся основная часть кода. Конечно, есть еще много подробных вопросов в конкретной реализации и других функциях, которые могут быть не показаны, поэтому я не буду объяснять их по отдельности. Подробности можно будет узнать после прочтения. исходный код. Задавайте вопросы.

Ниже приведен адрес моего исходного кода, вы можете попробовать:

демо на github

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