В августе кондиционер все равно нужен для продолжения жизни.В этом сезоне второе измерение скорее всего будет запускать фейерверк.Самой яркой картинкой для меня должен быть фрагмент фейерверка при падении стекла в "Форме звука", который великолепен и тих.
Давайте сначала взглянем на изображение выше. Это GIF, преобразованный из видеоклипа, захваченного с помощью ffmpeg. Использование gif для реализации фонового видео также является вариантом. Изображение может решить проблему. Зачем изучать фоновое видео?
Почему бы не использовать GIF
Давайте сначала посмотрим на набор данных:
Разрешение исходного видео 1920х1080, длительность 25fps 6с, объем 1.4M, конвертируется в gif-изображение того же разрешения и частоты кадров.26M !!
И поскольку формат gif поддерживает только 256 цветов, хотя разрешение экрана mp4 в gif остается неизменным, качество изображения сильно страдает.Вы можете видеть очевидный эффект блока пикселей на картинке выше.
Поэтому при преобразовании ежедневных видео в гифки будет выполняться определенное сжатие.Объем верхней гифки после обработки сжатия 640x360 12fps составляет 2,3М, что все равно больше, чем объем видео.
# mp4 转 gif
ffmpeg -y -i demo.mp4 -s 640x360 -r 12 demo_mini.gif
По сравнению с видео-гифками есть два очевидных недостатка:
- Размер gif-изображения с тем же визуальным эффектом намного больше, чем у видеофайла.
- GIF ограничен 256 цветами и не может гарантировать детализацию визуального эффекта.
Так что времена изменились, гифку можно открыть, смотрите видео~
Фоновая реализация элемента видео
Давайте начнем с рассмотрения ключевых элементов использования видео для создания фона:
- Автовоспроизведение
- Удалить элементы управления воспроизведением для видео
- Элемент видео должен быть размещен внизу
Вроде нет проблем, можно открыть:
<section>
<video
loop
autoplay="autoplay"
preload="auto"
>
<source src="./demo.mp4" type="video/mp4">
</video>
<div>mask</div>
</section>
Абсолютное позиционирование над видеоэлементом изменило слой маски,loopЗацикленное воспроизведение и не настраиватьcontrolsКомпоненты управления отображаться не будут.Ну вроде нормально,но видео не воспроизводится автоматически.Если поумнеете,проверите информацию и обнаружите,что автоматическое воспроизведение видео ограничено,тольконет трекавидео илинемойЭлемент видео можно только воспроизвести, поэтому я добавилmutedВы написали:
<section>
<video
loop
muted
autoplay="autoplay"
preload="auto"
>
<source src="./demo.mp4" type="video/mp4" >
</video>
<div>mask</div>
</section>
Видео начинает воспроизводиться автоматически, но, похоже, это не проблема на компьютере, почему бы вам не попробовать другой телефон?
Откройте charles и подключите прокси, откройте его с помощью сафари Гуози, вроде проблем нет, попробуйте изменить WeChat, и тут вы с удивлением обнаружите:
- Иерархия видеоэлементов
- Видео больше не воспроизводится автоматически
Ну найти решение
Решение иерархической путаницы для видеоэлементов
Установите флаг встроенного воспроизведения для видеоplaysinline, а затем добавить различные префиксы для совместимости:
- playsinline="true"
- webkit-playsinline="true"
- mtt-playsinline="true"
Укажите тип проигрывателя страницы в WeChat:
- x5-video-player-type="h5-page"
Видео не воспроизводится автоматически
WeChat может отслеживать страницуWeixinJSBridgeReadyдля запуска воспроизведения видео
<section>
<video
muted
loop
class="player"
autoplay="autoplay"
preload="auto"
playsinline="true"
webkit-playsinline="true"
mtt-playsinline="true"
x5-video-player-type="h5-page"
>
<source src="./demo.mp4" type="video/mp4">
</video>
<div class="mask">
遮罩层
</div>
</section>
<script>
window.onload = function () {
const player = document.querySelector('.player');
// 自动播放
document.addEventListener('WeixinJSBridgeReady', player.play());
}
</script>
Попробуйте WeChat, он очень стабилен. На всякий случай попробуйте разные браузеры на Android.
как и ожидалось,videoеще чтоvideo, браузер уже не тот хром.
Почти каждый отечественный бренд телефона Androidсобственный браузеротличноvideoЭлементы несколько настраиваются, общие, но не ограничивающиеся:
- Видео без звука не воспроизводится автоматически
- Панель управления не может быть скрыта (даже если не установлена
controls) - Видео является элементом верхнего уровня и не может быть переопределено.
- Видео по умолчанию воспроизводит всплывающее окно
- Более того, добавить вам рекламу
- ...
videoХарактеристики элементов на стороне Android неоднородны, и хорошего решения пока не найдено.
теперь, когдаvideoбез измененийcanvasЕсли нет, видео нарисовать холст не минутное дело.
видео рисовать холст?
Поместите картинку, чтобы вы чувствовали:
Товарищи, чтобы нарисовать видео на холст, его надо сначала воспроизвести!
Даже в некоторых браузерах, которые могут автоматически воспроизводить видео, при рисовании видео на холст элемент видео должен быть видимым, поэтому скрытый элемент видео сделать нельзя.
В этом случае мы можем сделать снимок видео, а затем сделать сжатый файл и рисовать его через холст?
Подожди, а это не просто видеофайл? Стоит ли делать скриншот, чтобы поиграть? Итак, что нам нужно, так это декодировать видеофайл в воспроизводимые кадры!
video decode
Решение для декодирования видео состоит в том, чтобы просто декодировать видеофайл в покадровые изображения и рисовать их на холсте с определенной скоростью.
Предшественники сажали деревья, более поздние поколения наслаждались тенью, а github искал несколько доступных библиотек.
WasmVideoPlayerДемонстрация прототипа, реализация ffmepg + wasm, низкая мобильная производительность
WXInlinePlayerЗависит от FLV и громоздкий
BroadwayАвтор реализовал набор декодера h264 на стороне Android (реализация на языке c + wasm), который поддерживает видео в формате mp4 с определенной кодировкой, причем поддержка не идеальна, черный экран, не воспроизводится по к частоте кадров видео (видео не мелкозернистое).степень воспроизведения)
jsmpegАвтор вручную создал декодер mpeg-ts (поддерживает версии JavaScript и wasm), поддерживает видео в формате ts (кодировка mpeg1), поддерживает относительно стабильную работу и поддерживает мелкозернистое воспроизведение.
Поскольку видео в формате MP4 более распространено, идеально воспроизводить MP4 напрямую, ноWasmVideoPlayerа такжеBroadwayРеализация не идеальна, во-первых, плохая производительность мобильного терминала, во-вторых, несовершенная поддержка декодирования.
Ни один из вышеперечисленных инструментов не поддерживает пакеты npm.Если вы хотите использовать его в продакшене, вам нужно сделать вторичный пакет самостоятельно.
Окончательный выборjsmpeg, jsmpeg имеет преимущество в поддержке видео в формате ts.
ts — это формат инкапсуляции, снятый японской камерой высокого разрешения, а полное название — MPEG2-TS. ts — это сокращение от «Транспортный поток». Отличительной чертой формата MPEG2-TS является то, что его можно декодировать независимо от любого сегмента видеопотока.
Например, фоновый видеоматериал10MНам не нужно запрашивать все видео, чтобы воспроизвести его, мы можем передатьContent-RangeРазделите на несколько сегментов, чтобы ускорить загрузку и воспроизведение видео. jsmpeg также поддерживает запросы на сегментирование видео.
jsmpegСам модуль относительно понятен, поэтому его удобнее запаковать в npm дважды.
silent-film-playerэто яjsmpegСчитается, что простая вторичная инкапсуляция используется для фонового воспроизведения видео, поэтому модули, связанные с декодированием звука, удалены, а поддержка Web Workers добавлена:
- Поддержка разделенных модулей для пакетов npm
- удалить звуковой модуль
- Извлечено из основного модуля синтаксического анализа
- Добавлена поддержка веб-воркеров.
Заинтересованные студенты могут попробовать~
использовать:
<template>
<section>
<canvas ref="canvas"></canvas>
<div class="mask">
遮罩层
</div>
</section>
</template>
<script>
import Player from 'silent-film-player';
export default {
data() {
return {
url: 'https://xxx.ts',
};
},
mounted() {
const {
url,
$refs: { canvas },
} = this;
window.player = new Player(url, {
canvas,
loop: true,
autoplay: true,
disableWebAssembly: true,
// 分片大小
chunkSize: 1 * 1024 * 1024,
videoBufferSize: 512 * 1024,
});
},
};
</script>
Посмотрите несколько примеров:
Пример репозитория здесь:GitHub.com/kinglysky/no…
Пока это, пожалуй, более надежная схема реализации фонового видео.
Реализация видео переднего плана
Считаете ли вы, что фоновое видео может быть размещено только на нижнем слое видения?Давайте сначала рассмотрим пример:
Разве это не удивительно? Структура такова: холст накладывается на элемент изображения, но содержание видео показывает нижнюю картинку.
<section class="container">
<img
class="view-bg"
src="./demo.jpeg"
/>
<canvas
ref="canvas"
class="view-canvas"
>
</canvas>
<div class="view-mask">MASK</div>
</section>
Конкретная реализация заключается в добавлении свойства css к холсту.
mix-blend-mode: screen;
Да, вам нужно только установить это свойство, и черная часть видео может открывать нижнее изображение.
оmix-blend-modeПодробное объяснение атрибутов см. в книге Чжан Синьсюй.Глубокое понимание режима наложения CSS mix-blend-mode screen..
разное
-
Декодирование видео потребляет больше производительности.Обратите внимание на контроль количества воспроизводимых видео.Вы можете управлять воспроизведением элементов видео в видимой области, а невидимые видео не будут воспроизводиться.
-
декодирование wasm имеет плохую поддержку мобильных устройств и производительность (особенно Android), поэтому его не рекомендуется использовать.
-
Для браузеров, поддерживающих стандартное поведение видео, таких как настольные браузеры, вы можете напрямую использовать видео для реализации фонового видео.
-
iOS Хотя большинство браузеров имеют хорошую поддержку элемента видео, есть несколько специальных:
夸克,UC 极速版,ALOOKВидео воспроизводится во всплывающем слое по умолчанию, иALOOKбраузерuserAgentна самом деле иSafariодинаковые, так что вы не можете отличить их друг от друга -
Страница WeChat
WeixinJSBridgeReadyНевозможно вызвать асинхронно загруженное видео -
Преобразование MP4 в TS приведет к снижению качества видео, поэтому рекомендуется увеличить коэффициент транскодирования.
Коротко об идее реализации.В настоящее время эта программа запущена онлайн.Заинтересованные студенты могут ознакомиться с:
Изменить шаблон:wooooooooo.get it.com/template/18…
Готовая страница:g.gd-share.cn/p/gpmjb2gs
В следующем выпуске: Триггеры Alibaba Cloud Function Compute + OSS реализуют пакетное перекодирование видеофайлов,
over~