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>

我的网站供参考My Website

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>

Answer 2

或者您可以使用以下代码在动态回调中动态生成按钮

var button = document.createElement('button');
var node = document.createTextNode('Click me');
button.appendChild(node);
button.classList.add('button');
body.appendChild(button); //or any other parent element you wish to add the button to

或只是简单地在HTML中添加按钮，设置类并将显示调整为“显示：无”，并以与您现在操作标题的方式类似的方式进行更改。

这是带有工作示例的jsbin：http://jsbin.com/pepidedimo/edit?html,css,js,console,output

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

2 个答案: