Закрыть / скрыть видео после воспроизведения - PullRequest
Новая
       6

Закрыть / скрыть видео после воспроизведения

0 голосов
/ 19 сентября 2019

У меня есть полноэкранный автозапуск приглушенного mp4 на моем сайте.Я хочу, чтобы он закрывался / скрывался, когда достигал конца - и вместо этого показывал форму.Это возможно?Возможно, путем автоматического перенаправления на другую страницу, если другой вариант недоступен. 

    <div class="videoWrapper">
 <video controls autoplay muted>
   <source src="https://www.tectonicentertainment.com/wp-content/uploads/2019/09/TECTONIC.mp4" type="video/mp4">
      Your browser does not support the video tag
 </video>

1 Ответ

0 голосов
/ 20 сентября 2019

"Я хочу, чтобы он закрывался / скрывался, когда достигал конца, - и вместо этого отображал форму. Возможно ли это? Возможно, путем автоматического перенаправления на другую страницу, если другая не поддерживается".

(1) Чтобы определить окончание видео, добавьте onended к вашему тегу видео.Пример: onended="doSomeFunctionName()"

(2) Для обновления <div> используйте innerHTML, или же для перенаправления страницы используйте window.location.replace

Тестируемый пример:(обратите внимание, что <div> был присвоен идентификатор, поэтому мы знаем, что нужно обновить) 

<!DOCTYPE html>
<html>
<body>

<div id="myVidContainer" class="videoWrapper">
<video controls autoplay muted onended="myVideoFinished()">
<source src="https://www.tectonicentertainment.com/wp-content/uploads/2019/09/TECTONIC.mp4" type="video/mp4">
Your browser does not support the video tag
</video>
</div>

<script>

function myVideoFinished() 
{
    alert("The video has ended");

    //# create FORM code in some string
    var form_code = "<form action='/action_page.php' method='get'>"
    form_code += "First name: <input type='text' name='fname'><br>"
    form_code += "Last name: <input type='text' name='lname'><br>"
    form_code += "<input type='submit' value='Submit'>"
    form_code += "</form>"

    //# replace Video tag with Form
    document.getElementById("myVidContainer").innerHTML = form_code;

    //# or Redirect to another page
    //window.location.replace("https://www.google.com")     
}

</script>

</body>
</html>
...