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

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

<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>

我想用视频替换那个图像和按钮。我不希望视频在我按下播放按钮之前出现。我该怎么做？

感谢

<!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>

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);

我想我找到了解决方案：

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);

相关内容

最新更新

热门标签：