时间戳

首页 > 解决方案 > 播放后关闭/隐藏视频

html - 播放后关闭/隐藏视频

问题描述

我的网站上有一个全角自动播放静音 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>

标签： htmlmp4

解决方案

“我希望它在到达末尾时关闭/隐藏 - 而是显示一个表单。这可能吗？也许通过自动重定向到另一个页面，如果另一个页面不是一个选项。”

(1)检测视频结尾添加onended到您的视频标签。例子： onended="doSomeFunctionName()"

(2)更新一个<div>使用innerHTML，或者重定向页面使用window.location.replace

可测试的例子：（注意<div>已经给了一个ID，所以我们知道要更新哪个东西）

<!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>

推荐阅读