Альтернативное изображение для видео iframe - PullRequest
Новая
       8

Альтернативное изображение для видео iframe

0 голосов
/ 01 декабря 2018

Итак, я хочу иметь альтернативу для своего видео iframe на youtube, поэтому, если видео не загружается из-за интернет-соединения, оно загружает альтернативное изображение с локального хоста. 

<iframe width="95%" height="320" src="https://www.youtube.com/embed/OA318VbEhtc?&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Может кто-нибудь помочь мне с этим?

Ответы [ 2 ]

0 голосов
/ 02 декабря 2018

Я нашел простой ответ для этого, используя это: 

<html>
<head>
<script>            
function updateOnlineStatus() {
document.getElementById('video').src = "HERE COMES THE YT LINK";
document.getElementById('video').style.backgroundImage = "";
}

function updateOfflineStatus() {
document.getElementById('video').style.backgroundImage = "url(PATH TO A CUSTOM ERROR 
IMAGE)";
document.getElementById('video').src = "";
}

window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOfflineStatus); 

</script>
</head>
<body>
<iframe id="video" width="95%" height="320" frameborder="0" allowfullscreen></iframe>


<script>
if(navigator.onLine){
document.getElementById('video').src = "HERE COMES THE YT LINK";
document.getElementById('video').style.backgroundImage = "";
} else {
document.getElementById('video').style.backgroundImage = "PATH TO A CUSTOM ERROR 
IMAGE";
document.getElementById('video').src = "";
}
</script>

</body>
</html>

Это проверяет, прежде всего, после загрузки страницы, есть ли подключение к Интернету или нет.Если он находится в автономном режиме, источник видео будет удален, и вы сможете видеть только фоновое изображение (пользовательскую страницу ошибки), а если после загрузки страницы интернет-соединение отключается или включается, прослушиватель событий снова проверит статус онлайн / офлайни делай правильные изменения.

0 голосов
/ 01 декабря 2018

Если нет подключения к Интернету, страница не будет загружаться.Таким образом, вы не можете использовать alt='' или иметь альтернативное изображение.Сожалею!:(

...