javascript - 视频播放完毕后如何添加自定义按钮

Question

因此，我已经使用此 javascript 编写了背景视频播放完毕后出现的其他内容

var vid = document.getElementById("bgvid");
var vid2 = document.getElementById('akiratrailer');
vid.onended = function() {myFunction()}; 
function myFunction() {
vid2.style.display = "block";
document.getElementById("headline2").innerHTML = "stuff";
document.getElementById("headline3").innerHTML = "stuff";
};

我如何向这个javascript添加一个自定义按钮（我已经有按钮的CSS），以便它可以在背景视频完成后与其他东西一起显示？

这是我的按钮的 html

<a href='newpage.html' class='button'>blah blah blah</a>

我的网站供参考我的网站

标签： javascripthtml

Answer 1

尝试这个：

var vid = document.getElementById( 'bgvid' ),
    vid2 = document.getElementById( 'content' );

vid.onended = function() {
    vid2.style.display = 'block';
    document.getElementById( 'headline2' ).innerHTML = 'stuff';
    document.getElementById( 'headline3' ).innerHTML = 'stuff';
}

* {
    box-sizing: border-box
}
body {
    margin: 0
}
#bgvid {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%
}
#content {
    display: none;
    position: fixed;
    overflow-y: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    text-align: center
}
#akiratrailer {
    margin: 0 auto;
    width: 50%
}
.button {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
    text-decoration: none
}
.button:hover {
    background: #ddd;
    color: black
}

<video autoplay muted id="bgvid">
    <source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div id="content">
    <h2 id="headline2"></h2>
    <video id="akiratrailer" controls>
        <source src="http://andiviaandes.com/videos/akiratrailer.mp4" type="video/mp4">
    </video>
    <h2 id="headline3"></h2>
    <a href='#' class='button'>blah blah blah</a>
</div>