5 KiB
5 KiB
VAST Реклама в Flutter
Этот проект демонстрирует интеграцию VAST (Video Ad Serving Template) рекламы в Flutter приложение.
Возможности
- Загрузка VAST рекламы из локального XML-файла
- Загрузка VAST рекламы с сервера
- Поддержка пропуска рекламы после определенного времени
- Обработка кликов по рекламе
- Прогресс-бар для отображения времени воспроизведения
- Fallback на локальный файл при ошибке загрузки с сервера
Структура проекта
lib/
├── vast_ad_model.dart # Модели данных для VAST рекламы
├── vast_ad_service.dart # Сервис для загрузки VAST рекламы
├── vast_ad_player.dart # Виджет для воспроизведения VAST рекламы
├── simple_video_page.dart # Основная страница с локальной VAST рекламой
├── vast_server_video_page.dart # Страница с загрузкой VAST с сервера
└── main.dart # Главный файл приложения
assets/
├── vast_ad.xml # Локальный VAST XML-файл
└── example_vast_server.xml # Пример XML для размещения на сервере
Использование
1. Локальная VAST реклама
Реклама загружается из файла assets/vast_ad.xml:
final vastAd = await VastAdService.loadVastAdFromAssets('assets/vast_ad.xml');
2. VAST реклама с сервера
Реклама загружается с указанного URL:
final vastAd = await VastAdService.loadVastAdFromUrl('https://your-server.com/vast_ad.xml');
3. Воспроизведение рекламы
VastAdPlayer(
vastAd: vastAd,
onAdComplete: () {
// Реклама завершена
},
onAdError: () {
// Ошибка воспроизведения
},
onAdClick: () {
// Клик по рекламе
},
)
Формат VAST XML
Поддерживается VAST 4.0 формат. Пример структуры:
<?xml version="1.0" encoding="UTF-8"?>
<VAST version="4.0">
<Ad id="154517">
<InLine>
<AdServingId>SSIpfEA8qYq7</AdServingId>
<Impression>https://example.com/impression</Impression>
<Creatives>
<Creative id="1">
<Linear>
<Duration>00:00:15</Duration>
<MediaFiles>
<MediaFile id="1" delivery="progressive" type="video/mp4" width="1280" height="720">
<![CDATA[ https://example.com/video.mp4 ]]>
</MediaFile>
</MediaFiles>
<VideoClicks>
<ClickThrough>
<![CDATA[ https://example.com/click ]]>
</ClickThrough>
<ClickTracking>
<![CDATA[ https://example.com/tracking ]]>
</ClickTracking>
</VideoClicks>
<Extensions>
<Extension type="skipTime">
<![CDATA[ 00:08 ]]>
</Extension>
<Extension type="linkTxt">
<![CDATA[ Пропустить рекламу ]]>
</Extension>
</Extensions>
</Linear>
</Creative>
</Creatives>
</InLine>
</Ad>
</VAST>
Настройка для сервера
- Разместите XML-файл на вашем сервере
- Обновите URL в
vast_server_video_page.dart:
static const String _vastAdUrl = 'https://your-server.com/vast_ad.xml';
- Убедитесь, что сервер возвращает правильный Content-Type:
application/xml
Зависимости
dependencies:
flutter:
sdk: flutter
video_player:
xml: ^6.5.0
http: ^1.1.0
Особенности
- Пропуск рекламы: Кнопка пропуска появляется через время, указанное в
skipTime - Прогресс-бар: Отображает прогресс воспроизведения рекламы
- Обработка ошибок: При ошибке загрузки с сервера используется локальный fallback
- Жизненный цикл: Корректная обработка паузы/возобновления при смене состояния приложения
Тестирование
- Запустите приложение:
flutter run - Выберите вкладку "VAST Локальная" для тестирования локальной рекламы
- Выберите вкладку "VAST Сервер" для тестирования загрузки с сервера
Примечания
- Убедитесь, что видео-файл доступен по указанному URL
- Для продакшена настройте правильные URL для загрузки рекламы
- Добавьте обработку ошибок сети и таймаутов
- Рассмотрите добавление кэширования рекламы для улучшения производительности