IMA SDK упрощают интеграцию мультимедийной рекламы на ваши веб-сайты и приложения. IMA SDK могут запрашивать рекламу с любого рекламного сервера , совместимого с VAST, и управлять воспроизведением рекламы в ваших приложениях. С помощью SDK IMA DAI приложения отправляют потоковый запрос на рекламу и видеоконтент — либо VOD, либо контент в реальном времени. Затем SDK возвращает объединенный видеопоток, так что вам не придется управлять переключением между рекламой и видеоконтентом в вашем приложении.
Выберите решение DAI, которое вас интересует
Воспроизведение прямых трансляций, зарегистрированных с помощью API Google Cloud Video Stitcher.
В этом руководстве показано, как использовать IMA DAI SDK для HTML5 для запроса и воспроизведения прямой трансляции события, зарегистрированного с помощью API Google Cloud Video Stitcher , а также как вставить рекламную паузу во время воспроизведения.
Это руководство расширяет базовый пример из руководства по началу работы с IMA DAI.
Информацию об интеграции с другими платформами или использовании клиентских SDK IMA см. в разделе SDK Interactive Media Ads .
Чтобы просмотреть или проследить за завершенным примером интеграции, загрузите пример облачного видеосшивателя для HLS или DASH .
Настройка проекта Google Cloud
Настройте проект Google Cloud и настройте учетные записи служб для доступа к проекту .
Создайте конфигурацию для прямой трансляции, используя собственную прямую трансляцию контента или тестовую прямую трансляцию . Это руководство ожидает поток HLS.
Введите следующие переменные для использования в IMA SDK:- Расположение
- Регион Google Cloud , в котором была создана ваша активная конфигурация:
LOCATION - Номер проекта
- Номер проекта Google Cloud с использованием Video Stitcher API:
PROJECT_NUMBER - Токен OAuth
Кратковременный токен OAuth сервисного аккаунта с ролью пользователя Video Stitcher:
OAUTH_TOKEN
Узнайте больше о создании кратковременных учетных данных для учетных записей служб . Токен OAuth можно повторно использовать в нескольких запросах, пока не истек срок его действия.
- Сетевой код
Код сети Менеджера рекламы для запроса объявлений:
NETWORK_CODE
- Идентификатор активной конфигурации
- Идентификатор конфигурации прямой трансляции, который вы указали при создании мероприятия прямой трансляции:
LIVE_CONFIG_ID - Пользовательский ключ актива
- Пользовательский ключ объекта Менеджера рекламы, созданный в процессе создания конфигурации для прямой трансляции с помощью API Video Stitcher:
CUSTOM_ASSET_KEY
Настройка среды разработки
Примеры приложений IMA демонстрируют только запросы потока HLS. Вы по-прежнему можете использовать потоки DASH при создании класса VideoStitcherLiveStreamRequest . При настройке DASH-совместимого проигрывателя вам необходимо настроить прослушиватель событий прогресса вашего видеопроигрывателя, который может предоставлять метаданные видео в StreamManager.processMetadata() . Эта функция принимает три параметра:
type: строка, для которой должно быть установлено значение'ID3'для потоков HLS и'urn:google:dai:2018'для потоков DASH.data: для сообщений о событиях DASH это строка данных сообщения.timestamp: число, обозначающее время начала сообщения о событии для потоков DASH.
Отправляйте метаданные как можно скорее и так часто, как это позволяют события вашего игрока. Если метаданные отсутствуют или неверны, IMA DAI SDK может не инициировать рекламные события, что приведет к неправильному сообщению о рекламных событиях.
Загрузите примеры IMA DAI для HTML5 и извлеките простой пример HLS.js в новую папку. Этот пример представляет собой веб-приложение, которое вы можете разместить локально в целях тестирования.
Чтобы разместить пример локально, перейдите в новую папку и выполните следующую команду Python, чтобы запустить веб-сервер:
python3 -m http.server 8000
http.server доступен только в Python 3.x. Вы можете использовать любой другой веб-сервер, например HTTP-сервер Apache или Node JS.
Откройте веб-браузер и перейдите по адресу localhost:8000 чтобы увидеть видеоплеер. Ваш браузер должен поддерживать библиотеку HLS.js.
Если все работает правильно, нажатие кнопки воспроизведения на видеоплеере запускает короткометражный фильм «Слезы стали» после короткой рекламы. Этот контент доставляется с использованием потока видео по запросу (VOD).
Запросить прямую трансляцию
Чтобы заменить образец потока VOD вашей прямой трансляцией, используйте класс VideoStitcherLiveStreamRequest , который автоматически создает рекламный сеанс с Google Ad Manager. Вы можете использовать пользовательский интерфейс Google Ad Manager, чтобы найти сгенерированные сеансы DAI для мониторинга и отладки.
В существующем примере есть функции для запроса потока VOD или прямой трансляции. Чтобы он работал с API Google Cloud Video Stitcher, вам необходимо добавить новую функцию для возврата объекта VideoStitcherLiveStreamRequest .
Вот пример:
// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(
videoElement,
adUiElement
);
streamManager.addEventListener(
[
google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
],
onStreamEvent, false);
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in our metadata, we pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
videoElement.addEventListener('pause', () => {
playButton.style.display = 'block';
});
playButton.addEventListener('click', initiatePlayback);
}
function initiatePlayback() {
requestVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';
streamManager.requestStream(streamRequest);
}
Для локального тестирования, если файлы прямой трансляции расположены в корзине Cloud Storage, вам необходимо включить CORS для источника http://localhost:8000 .
Перезагрузите страницу. Затем вы можете запрашивать и воспроизводить собственные прямые трансляции.
(Необязательно) Добавьте параметры сеанса потоковой передачи.
Настройте запрос потока, добавив параметры сеанса, чтобы переопределить конфигурацию API Cloud Video Stitcher по умолчанию, используя VideoStitcherLiveStreamRequest.videoStitcherSessionOptions . Если вы укажете нераспознанный параметр, API Cloud Video Stitcher ответит ошибкой HTTP 400. Обратитесь за помощью к руководству по устранению неполадок .
Например, вы можете переопределить параметры манифеста с помощью следующего фрагмента кода, который запрашивает два манифеста потока с воспроизведением, упорядоченным от наименьшего битрейта к наибольшему.
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"includeRenditions": [
{"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
{"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
],
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
Вставить рекламную паузу
API Google Cloud Video Stitcher вставляет рекламу, полученную из рекламного тега, для каждой рекламной паузы. Рекламные паузы обозначаются в манифесте с помощью рекламных маркеров. Рекламные маркеры вставляются кодировщиком прямой трансляции.
Если вы используете собственную прямую трансляцию, вам необходимо вставить рекламный маркер. Дополнительную информацию о поддерживаемых рекламных маркерах HLS и DASH см. в документации по рекламным маркерам .
Если вы создали прямую трансляцию с помощью API Google Cloud Livestream, вставьте событие канала рекламной паузы .
Реклама воспроизводится сразу после вставки рекламной паузы.
Очистить
Теперь, когда вы успешно разместили прямую трансляцию с помощью API Google Cloud Video Stitcher и запросили ее с помощью IMA DAI SDK для HTML5, важно очистить все обслуживающие ресурсы.
Следуйте инструкциям по очистке прямой трансляции , чтобы удалить все ненужные ресурсы и активы.
Наконец, в окне терминала, где вы запустили веб-сервер Python 3, используйте команду ctrl+C чтобы завершить работу локального сервера.