Question

我使用简单的图像我想要做的就是点击图像它会做两件事首先是它会隐藏图像并在后面播放内容我使用的是没有播放按钮的iframe视频，所以一旦你点击它播放的视频的任何地方，我试图添加简单的播放按钮，使用将点击图像和视频将播放我需要帮助javascript任何帮助将不胜感激。

<div id="playbutton">
<img style="width: 200px; height: 200px; border: 0;" src="http://iconshots.com/wp-content/uploads/2010/01/final1.jpg">

</div>

Answer 1

试试这个......

  <div id="playbutton">
  <img style="width: 200px; height: 200px; border: 0;" src="http://iconshots.com/wp-   content/uploads/2010/01/final1.jpg" onclick="this.style.display='none';PlayVideo();">

  </div>

所以你添加这个onclick =＆＃34; this.style.display =＆＃39; none＆＃39 ;; PlayVideo（）;＆＃34;

如果您需要更多帮助，请回复

Answer 2

检查小提琴@ http://jsfiddle.net/cwL9moqk/4/

试试这个：

 JQuery:
 $(document).ready(function() {
  $('#play-video').on('click', function(ev) {

    $("#video")[0].src += "&autoplay=1";
    ev.preventDefault();

  });
});

HTML:
<div id="playbutton">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRh0Aw8dopC_x6jfb8wYuiVRoo9Xy0EwWQskikB8MmE_AAepfUZEowIMQ" onclick="this.style.display='none';" id="play-video">

<iframe id="video" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>

CSS:
#play-video {
width: 200px;
height: 200px;
border: 0;
bottom: 10;
left: 0;
right: 0;
position: fixed;
text-align: center;
margin: 0px auto; 
}

检查小提琴@ http://jsfiddle.net/cwL9moqk/4/ 如果您需要更多帮助或者这不是您想要的，请回复评论 - 我很乐意提供帮助！

如何通过两个功能隐藏图像？

2 个答案: