149 lines
5 KiB
Markdown
149 lines
5 KiB
Markdown
|
# 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`:
|
|||
|
|
|
|||
|
|
```dart
|
|||
|
|
final vastAd = await VastAdService.loadVastAdFromAssets('assets/vast_ad.xml');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. VAST реклама с сервера
|
|||
|
|
|
|||
|
|
Реклама загружается с указанного URL:
|
|||
|
|
|
|||
|
|
```dart
|
|||
|
|
final vastAd = await VastAdService.loadVastAdFromUrl('https://your-server.com/vast_ad.xml');
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. Воспроизведение рекламы
|
|||
|
|
|
|||
|
|
```dart
|
|||
|
|
VastAdPlayer(
|
|||
|
|
vastAd: vastAd,
|
|||
|
|
onAdComplete: () {
|
|||
|
|
// Реклама завершена
|
|||
|
|
},
|
|||
|
|
onAdError: () {
|
|||
|
|
// Ошибка воспроизведения
|
|||
|
|
},
|
|||
|
|
onAdClick: () {
|
|||
|
|
// Клик по рекламе
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Формат VAST XML
|
|||
|
|
|
|||
|
|
Поддерживается VAST 4.0 формат. Пример структуры:
|
|||
|
|
|
|||
|
|
```xml
|
|||
|
|
<?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>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Настройка для сервера
|
|||
|
|
|
|||
|
|
1. Разместите XML-файл на вашем сервере
|
|||
|
|
2. Обновите URL в `vast_server_video_page.dart`:
|
|||
|
|
|
|||
|
|
```dart
|
|||
|
|
static const String _vastAdUrl = 'https://your-server.com/vast_ad.xml';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3. Убедитесь, что сервер возвращает правильный Content-Type: `application/xml`
|
|||
|
|
|
|||
|
|
## Зависимости
|
|||
|
|
|
|||
|
|
```yaml
|
|||
|
|
dependencies:
|
|||
|
|
flutter:
|
|||
|
|
sdk: flutter
|
|||
|
|
video_player:
|
|||
|
|
xml: ^6.5.0
|
|||
|
|
http: ^1.1.0
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## Особенности
|
|||
|
|
|
|||
|
|
- **Пропуск рекламы**: Кнопка пропуска появляется через время, указанное в `skipTime`
|
|||
|
|
- **Прогресс-бар**: Отображает прогресс воспроизведения рекламы
|
|||
|
|
- **Обработка ошибок**: При ошибке загрузки с сервера используется локальный fallback
|
|||
|
|
- **Жизненный цикл**: Корректная обработка паузы/возобновления при смене состояния приложения
|
|||
|
|
|
|||
|
|
## Тестирование
|
|||
|
|
|
|||
|
|
1. Запустите приложение: `flutter run`
|
|||
|
|
2. Выберите вкладку "VAST Локальная" для тестирования локальной рекламы
|
|||
|
|
3. Выберите вкладку "VAST Сервер" для тестирования загрузки с сервера
|
|||
|
|
|
|||
|
|
## Примечания
|
|||
|
|
|
|||
|
|
- Убедитесь, что видео-файл доступен по указанному URL
|
|||
|
|
- Для продакшена настройте правильные URL для загрузки рекламы
|
|||
|
|
- Добавьте обработку ошибок сети и таймаутов
|
|||
|
|
- Рассмотрите добавление кэширования рекламы для улучшения производительности
|