当前位置: 首页 > 知识库问答 >
问题:

HTML5视频结束时如何显示div元素

徐旻
2023-03-14

我一直试图在我网站的主页上做以下操作:全屏播放视频(无控件,无循环,静音,自动播放,存储在本地),当它结束时,视频被隐藏并显示一个div元素。

我习惯于使用HTML和CSS,但不太喜欢使用JavaScript,所以到目前为止,我所做的是放置视频,并使用复选框隐藏/显示元素(如图所示),然后尝试修改它,这样它就可以检测到视频何时结束,但我无法使其工作。

我使用的代码可能是错误的,因为它是为一个复选框准备的,但我也尝试了写在那里的解决方案,似乎问题来自用于检测视频何时结束不工作的函数


以下是我尝试使其自动化的内容:

null

#menudisplay {
    display: none;
    text-align: center;
    margin-top: 20vh;
  font-family: 'Montserrat';
}

#menudisplay ul {
    list-style-type: none;
}

#menudisplay ul li {
    padding: 110px;
}

.style {
    width: 100vw;
    height: 100vh;
    object-fit: contain;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    background-color:lightgray;
}
<!DOCTYPE html>
<html>

  <head>
    <title>Website</title>
    <meta http-equiv="Content-Type" content="charset=UTF-8" />
    <link rel="stylesheet" href="./mystyle.css" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Amatic SC|Montserrat' rel='stylesheet'>
  </head>

  <video autoplay muted class="style">
    <source src="./video.mp4" type="video/mp4">
    The video is not working.
  </video>

  <div id="menudisplay">

    <img class="style" src="./img.jpg">

    <ul>

      <li>
        <a href="./ex1.html">EXEMPLE 1</a>
      </li>

      <li>
        <a href="./ex2.html">EXEMPLE 2</a>
      </li>

    </ul>

  </div>


  <script>
    function myFunction() {
      var video = document.getElementById("video");
      var menudisplay = document.getElementById("menudisplay");

      if (video.ended == true) {
        menudisplay.style.display = "block";
        video.style.display = "none";
      } else {
        menudisplay.style.display = "none";
      }
    }

  </script>

</html>

null

我使用Visual Studio代码,我的web浏览器是Edge。提前谢谢,我真的卡住了!

共有1个答案

夏侯昊明
2023-03-14

这应该行得通,

const video = document.querySelector('video');
const menuDisplay = document.querySelector('#menudisplay');
video.addEventListener('ended', (event) => {
    menuDisplay.style.display = 'block';
    //you can also do things with 'event' obj 
});

https://developer.mozilla.org/en-us/docs/web/api/htmlmediaelement/ended_event

 类似资料:
  • 问题内容: 您如何检测HTML5 元素何时播放完毕? 问题答案: 您可以添加带有“ end”作为第一个参数的事件监听器 像这样 :

  • 问题内容: 我正在尝试将YouTube视频源放入HTML5标签,但似乎不起作用。经过一番谷歌搜索,我发现HTML5不支持YouTube视频URL作为来源。 您可以使用HTML5嵌入YouTube视频吗?如果没有,是否有任何解决方法? 问题答案: 第1步:添加到您喜欢的YouTube网址 步骤2:在来源中寻找标签 第3步:添加到视频标签: 例: 注意那里似乎有些东西。我不知道该字符串可以工作多长时间

  • 问题内容: 是否可以将html5-视频显示为画布的一部分? 基本上与您在画布上绘制图像的方式相同。 谢谢! 问题答案: var canvas = document.getElementById(‘canvas’); var ctx = canvas.getContext(‘2d’); var video = document.getElementById(‘video’); 我猜上面的代码是自我解

  • 问题内容: [编辑:已解决,请参阅问题文本的中途] 有关了解在YouTube页面上播放视频的内容的快速提问: 综上所述 作为基于浏览器的GUI的一部分,我使用Selenium在Youtube上播放视频。 我需要知道视频何时完成播放,以便GUI进行其他操作(例如,将本地HTML馈入浏览器)。 代码段和问题 在这一点上,我可以考虑视频的长度。 但是,我想知道是否可以通过Selenium驱动程序查询Yo

  • 问题内容: 鉴于此HTML: 如何使它们像这样显示内联: foo bar baz 不像这样: foo bar baz 问题答案: 那是另一回事:

  • 本文向大家介绍HTML5如何嵌入视频?相关面试题,主要包含被问及HTML5如何嵌入视频?时的应答技巧和注意事项,需要的朋友参考一下 和音频类似,HTML5支持MP4、WebM和Ogg格式的视频,下面是简单实例: