Question

在网页上我有一个视频（标签，不是iframe），导航栏和显示的div设置：无。通过javascript，我试图让视频在它结束后消失（视频设置为autoplay =“true”），然后在它的位置显示div（我在开头提到的那个），以及更改导航栏中某些文本的颜色。它曾经工作（当我只删除视频，而不是其他东西），现在似乎我在事件监听器后无法运行的任何代码（我使用alert（）测试代码的不同部分看它是否熄灭）。这是代码：

    var video=document.getElementById('bg');
    video.addEventListener("ended", afterVideo, false);

    function afterVideo() {
        var video=document.getElementById('bg');
        var gallery=document.getElementById('gallery');
        var galleryText=document.getElementById('galleryText');
        var gLink=document.getElementById('gLink');
        video.removeEventListener("ended", afterVideo, false);
        video.style.display='none';
        gallery.style.display='block';
        galleryText.style.display='block';
        gLink.style.color='#0c8acb';
        }

我的代码位于代码的顶部（但是在body标签之后），然而，我看到这样做是很多人的问题，所以我在底部尝试了它，但它没有工作意图（也不是以前）。事件监听器似乎很早就被触发（在视频结束之前）并且仍然没有显示隐藏的div，也没有删除视频（但是当测试它时，alert（）每次都关闭）。

以下是相关的HTML：

<div class="fullVideo">
    <video id="bg" autoplay="true" muted="true">
        <source src="video/main6.mp4" type="video/mp4">
        <source src="video/main.ogg" type="video/ogg">
        Your browser does not support video.            
    </video>

    <video id="trans1" muted="true" > 
        <source src="video/trans1.mp4" type="video/mp4">
        <source src="video/trans1.ogg" type="video/ogg">
        Your browser does not support video.            
    </video>

    <div id="gallery">
        <div id="galleryText">
            <p>Text goes here!</p>
        </div>
    </div>
</div>

<nav style="top: 0px;">

    <div id="logo">
        <a href="index.html"></a>
    </div>

    <div id="verticalLine"></div>

    <div>
        <ul>
            <li><a href="#gallery" id="gLink">Gallery</a></li>
            <li><a href="#products" id="pLink">Products</a></li>
            <li class="br"></li>
            <li><a href="#contact.html">Contact</a></li>
            <li><a href="#about.html">About</a></li>
        </ul>
    </div>

    <div id="mNav">
        <br style="clear: left;">
        <p>
            <a href="#gallery">Gallery</a>
            <a href="#products">Products</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </p>
        <hr>
    </div>

</nav>

更新：似乎事件监听器在页面加载时被触发，按预期运行所有内容，但随后视频返回（我正在尝试删除的那个），使得它看起来像代码没有什么新东西...

Javascript- ADDEventListener（“已结束”......）无效

0 个答案: