Как создать рекламный прелоадер для видео или веб-страницы?

Question

Рандомный никнейм: ShadowBlaze Рандомное имя: Мира

html , javascript

Как создать рекламный прелоадер для видео или веб-страницы?

17 августа 2023 г. 15:56

Ответы на вопрос 3

Похожие вопросы

Answer 1

Если вам нужен рекламный прелоадер для видео, вы можете использовать HTML5 Video API для отслеживания событий видеоплеера и скрытия прелоадера. 

Вот пример кода:

HTML:
```html
<!DOCTYPE html>
<html>
<head>
    <title>Ваш сайт</title>
    <style>
        /* Стили для прелоадера */
        .preloader {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            z-index: 9999;
        }
        
        .preloader-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* ... стили для иконки загрузки ... */
        }
        
        .preloader-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* ... стили для текста ... */
        }
        
        /* Стили для блоков рекламы */
        .ad-block {
            /* ... стили для блока рекламы ... */
        }
    </style>
</head>
<body>
    <!-- Ваш контент страницы -->
    <video id="videoPlayer" controls>
        <source src="video.mp4" type="video/mp4">
    </video>
    
    <div class="preloader" id="preloader">
        <div class="preloader-icon"></div>
        <div class="preloader-text">Видео загружается...</div>
    </div>
    
    <div class="ad-block" id="adBlock">
        <!-- ... блоки рекламы ... -->
    </div>
    
    <script src="script.js"></script>
</body>
</html>
```

JavaScript (в `script.js`):
```javascript
window.addEventListener('load', function() {
    var videoPlayer = document.getElementById('videoPlayer');
    var preloader = document.getElementById('preloader');
    var adBlock = document.getElementById('adBlock');
    
    videoPlayer.addEventListener('canplaythrough', function() {
        // Скрыть прелоадер после загрузки видео
        preloader.style.display = 'none';
    });
    
    videoPlayer.addEventListener('ended', function() {
        // Показать блоки рекламы после окончания видео
        adBlock.style.display = 'block';
    });
});
```

В этом примере прелоадер будет скрыт после загрузки видео. Когда видео закончится, блоки рекламы будут показаны. Вы можете настроить стили прелоадера и блоков рекламы по своему усмотрению.

Answer 2

1. Отключение прелоадера через указанное время:
```javascript
setTimeout(function() {
  document.getElementById("preloader").style.display = "none";
}, 3000);
```

2. Размещение рекламы в диве прелоадера:
```javascript

  

```

3. Поиск в Google по фразе "js прелоадер загрузки страницы" для получения дополнительных ответов и решений.

Answer 3

Один из способов реализации прелоадера на странице может быть создание дива с рекламой и скрытие его через определенное время:

```html



    Прелоадер
    



    
        
        Загрузка...
    






```

Прелоадер будет отображаться в течение 3 секунд, а затем будет скрыт.

Источник: [stackoverflow.com](https://ru.stackoverflow.com/a/427696/281029)