Сегодня мы используем водяные знаки для самых разных приложений, причем большинство водяных знаков в настоящее время не используются в цифровых технологиях. Он обеспечивает четкий, но относительно ненавязчивый способ показать оригинальное авторство. Это особенно важно в эпоху Интернета, когда легко копировать и присваивать медиафайлы без разрешения.
Это руководство было написано, чтобы показать быстрый и простой способ разработки приложения, которое может добавлять водяные знаки к вашим видео с помощью API Shotstack. Этот API позволяет вам описать редактирование видео в формате JSON, а затем использовать ваш любимый язык программирования для одновременного рендеринга тысяч видео в облаке.
Предпосылки
API-интерфейс стека
API Shotstack позволяет отображать десятки тысяч видео в облаке и персонализировать каждое отдельное видео с помощью небольших изменений в файле JSON. С помощью API, способного одновременно отображать сотни видео в облаке. После регистрации просто войдите в систему, чтобы получить ключ API.
Бесплатная версия предоставляет вам бесплатное использование API, но вставляет в ваше видео небольшой водяной знак. Вы можете избавиться от этого, добавив платежную информацию и используя производственный ключ.
Node.js
Мы будем использовать Node.js для создания нашего приложения. Никакой причудливой маршрутизации, только основы.
Настройка сцены
Для этого примера мы будем притворяться, что сняли несколько отличных кадров открытого дома, и очень хотим, чтобы на этом были водяные знаки, чтобы потенциальные покупатели знали, где искать. Мы будем использовать три видеоклипа с Pexels, которые вместе нарисуют красивую картину того, что продается:
В качестве водяного знака мы будем использовать логотип нашей компании по недвижимости; Блокировать недвижимость:
Код
В этом руководстве я не буду вдаваться в подробности того, как именно работает API и какие различные эффекты и переходы доступны, но если вам нужен учебник для начинающих, взгляните на это руководство.
JSON
API Shotstack работает, отправляя строку JSON в конечную точку API. JSON предоставляет временную шкалу клипов, переходов и эффектов, которые преобразуются в выходной файл, такой как MP4 или GIF.
В приведенном ниже примере мы накладываем водяной знак (файл PNG) поверх трех видео. Свойства масштаба, непрозрачности, положения и смещения позволяют нам расположить водяной знак именно там, где мы хотим его разместить.
КОПИРОВАТЬ
{
"timeline": {
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/logos/real-estate-black.png"
},
"start": 0,
"length": 13,
"fit": "none",
"scale": 0.33,
"opacity": 0.5,
"position": "bottomRight",
"offset": {
"x": -0.04,
"y": 0.04
}
}
]
},
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/suburbia-aerial.mp4"
},
"start": 0,
"length": 5,
"transition": {
"in": "fade",
"out": "fade"
}
},
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/home-interior-1.mp4"
},
"start": 4,
"length": 5,
"transition": {
"in": "fade",
"out": "fade"
}
},
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/home-interior-2.mp4"
},
"start": 8,
"length": 5,
"transition": {
"in": "fade",
"out": "fade"
}
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "sd"
}
}Вы можете отправить этот JSON в API с помощью Curl или такого приложения, как Postman (см. наш Hello World tutorial о том, как использовать Curl для прямой публикации в API), но для этого руководства мы создадим простое приложение с использованием Node. js-скрипт. Сохраните приведенный выше JSON в файле с именем template.json, который будет читать наш скрипт.
Приложение Node.js
Приведенный ниже сценарий Node.js принимает JSON и отправляет его в API. Затем он опрашивает API, чтобы получить статус рендеринга. Примерно через 30 секунд он регистрирует URL-адрес видео, который вы можете использовать. Перед запуском скрипта вам необходимо установить библиотеки dotenv и axios с помощью npm или yarn.
КОПИРОВАТЬ
require('dotenv').config(); const axios = require('axios');const shotstackUrl = 'https://api.shotstack.io/stage/'; const shotstackApiKey = process.env.SHOTSTACK_API_KEY; // Either declare your API key in your .env file, or set this variable with your API key right here.const json = require('./template.json');/** * Post the JSON video edit to the Shotstack API * * @param {String} json The JSON edit read from template.json */ const renderVideo = async (json) => { const response = await axios({ method: 'post', url: shotstackUrl + 'render', headers: { 'x-api-key': shotstackApiKey, 'content-type': 'application/json' }, data: json });return response.data; }/** * Get the status of the render task from the Shotstack API * * @param {String} uuid The render id of the current video render task */ const pollVideoStatus = async (uuid) => { const response = await axios({ method: 'get', url: shotstackUrl + 'render/' + uuid, headers: { 'x-api-key': shotstackApiKey, 'content-type': 'application/json' }, });if (!(response.data.response.status === 'done' || response.data.response.status === 'failed')) { setTimeout(() => { console.log(response.data.response.status + '...'); pollVideoStatus(uuid); }, 3000); } else if (response.data.response.status === 'failed') { console.error('Failed with the following error: ' + response.data.response.error); } else { console.log('Succeeded: ' + response.data.response.url); } }// Run the script (async () => { try { const render = await renderVideo(JSON.stringify(json)); pollVideoStatus(render.response.id); } catch (err) { console.error(err); } })();
Первоначальный результат
После запуска приложения Node.js и завершения рендеринга у нас должно остаться следующее видео:
Это выглядит довольно хорошо, но черный водяной знак в первой сцене не очевиден. Было бы полезно, если бы мы могли изменить водяной знак, который мы используем, в зависимости от сцены.
Последние штрихи
Мы добавим несколько последних штрихов, таких как переходы, заголовок, несколько мелодий и изменим цвет изображения водяного знака в зависимости от сцены.
КОПИРОВАТЬ
{
"timeline": {
"soundtrack": {
"src": "https://feeds.soundcloud.com/stream/267703548-unminus-white.mp3",
"effect": "fadeOut"
},
"background": "#000000",
"tracks": [
{
"clips": [
{
"asset": {
"type": "title",
"text": "273 Murcheson Drive, East Hampton, NY",
"style": "future",
"size": "x-small",
"position": "bottomLeft",
"offset": {
"x": 0.6,
"y": -0.2
}
},
"start": 1,
"length": 5,
"transition": {
"in": "fade",
"out": "fade"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/logos/real-estate-white.png"
},
"start": 0,
"length": 5,
"fit": "none",
"scale": 0.33,
"opacity": 0.5,
"position": "bottomRight",
"offset": {
"x": -0.04,
"y": 0.04
},
"transition": {
"in": "fade",
"out": "fade"
}
},
{
"asset": {
"type": "image",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/logos/real-estate-black.png"
},
"start": 4,
"length": 5,
"fit": "none",
"scale": 0.33,
"opacity": 0.5,
"position": "bottomRight",
"offset": {
"x": -0.04,
"y": 0.04
},
"transition": {
"in": "fade",
"out": "fade"
}
},
{
"asset": {
"type": "image",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/logos/real-estate-black.png"
},
"start": 8,
"length": 5,
"fit": "none",
"scale": 0.33,
"opacity": 0.5,
"position": "bottomRight",
"offset": {
"x": -0.04,
"y": 0.04
},
"transition": {
"in": "fade",
"out": "fade"
}
}
]
},
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/suburbia-aerial.mp4"
},
"start": 0,
"length": 5,
"transition": {
"in": "fade",
"out": "fade"
}
},
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/home-interior-1.mp4"
},
"start": 4,
"length": 5,
"transition": {
"in": "fade",
"out": "fade"
}
},
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3-ap-southeast-2.amazonaws.com/footage/home-interior-2.mp4"
},
"start": 8,
"length": 5,
"transition": {
"in": "fade",
"out": "fade"
}
}
]
}
]
},
"output": {
"format": "mp4",
"resolution": "sd"
}
}Конечный результат
Смотрите ниже наш окончательный результат — профессионально отредактированное видео о недвижимости с водяными знаками, чтобы продемонстрировать свое творение!
Заключение
Код в этом руководстве обеспечивает простой способ создания приложения, которое использует изображение в качестве водяного знака и накладывает его поверх видео.
Мы создали более комплексное приложение для водяных знаков с открытым исходным кодом, которое вы можете использовать для водяных знаков на своих видео, с полным исходным кодом, доступным на GitHub.
Надеюсь, эта статья вдохновила вас начать использовать код для управления видео. Этот код может быть легко адаптирован для использования водяного знака видео вместо статического изображения и использования HTML для его дальнейшей персонализации, среди многих других манипуляций в масштабе, который был бы невозможен с помощью старомодного видеоредактора.
Подпишитесь на Shotstack, чтобы получать похожие статьи о программируемых видео и приложениях. Начните с наших учебных ресурсов, чтобы научиться запускать программируемые видео. Зарегистрируйтесь бесплатно, чтобы начать строить сегодня!
