Question

我有一个图像和一个按钮，如下所示：

<div id="center">
<img src="Images/img_menu/BOU.png" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" width="60" height="60" id="playButton" onclick=playVideo()></button>
</div>

我想用视频替换该图像和按钮。我不希望视频出现，直到我按下按钮播放。我怎么能这样做？

由于

Answer 1

<!DOCTYPE HTML>
<html>
<head>
    <title>Hide Image button and show video</title>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#playButton').click( function () {
                $('#center').hide();
                $('#video-player-div').show();
            });
        });
    </script>

</head>
<body>

<div id="center">
<img src="Images/img_menu/BOU.png" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" width="60" height="60" id="playButton"/>
</div>

<div id="video-player-div" style="display:none;">Your video goes here</div>

</body>
</html>

Answer 2

var btn = document.getElementById('playButton');
var img = document.getElementById('img');

function playVideo()
{
img.style.display = 'none';
video.style.display = 'block';
}

btn.addEventListener('click', playVideo, false);

Answer 3

我想我找到了解决方案：

HTML：

<div id="centerside">
            <img src="Images/img_menu/BOU.png" id="img" width="100" height="100">
            </br>
            <input type="image" src="Images/img_menu/play_btn.png" id="btn" width="60" height="60" id="playButton" onclick=playVideo()></input>

            <div id="showVideoDiv" style="display:none;">
                <video id="myMovie" width="600" height="480">
                    <source src="Images/vid_menu/GOT_S4_E3.mp4">
                </video>
            </div>

        </div>

JAVASCRIPT

function doFirst(){

    var btn = document.getElementById('playButton');
    var img = document.getElementById('img');

    var showVideoDiv = document.getElementById('showVideoDiv');
    var myMovie = document.getElementById('myMovie');

    var centerside = document.getElementById("centerside");

    btn.addEventListener('click', playVideo, false);
}

function playVideo(){
    img.style.display = 'none';
    btn.style.display = 'none';

    showVideoDiv.style.display = 'block';
    myMovie.play();

    centerside.style.paddingTop="0px";
}

window.addEventListener('load',doFirst,false);

HTML - 用视频替换div（图像和按钮）（仅当我按下按钮时）

3 个答案: