如何隱藏onclick圖像並播放隱藏在其下的視頻？

有一個空白圖像（blank.png）與背景懸停效果，它的作品。我點擊圖片並隱藏，然後視頻div顯示，這是有效的。我無法弄清楚的是如何讓視頻播放原始空白圖像上的點擊。如何隱藏onclick圖像並播放隱藏在其下的視頻？

我有它的大部分工作方式，但不能讓視頻點擊圖像播放。

我不是最好的腳本。

什麼，我已經做了一個例子： http://jsfiddle.net/3s8EC/2/

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('.custom-th').click(function() { 
     $('.custom-th').fadeOut('fast', function() { 
      $("#thevideo").css("display","block"); 
      }); 
     }); 
    }); 
</script> 

<style> 
#imageID {background: url(http://edigi.co/Video-Intro.jpg) no-repeat; 
height: 370px; 
width: 100%; 
} 

#imageID:hover { 
background: url(http://edigi.co/Video-Intro-Hover.jpg) no-repeat; 
} 
</style> 

<div style="width: 100%; height: 370px; background-color: #000;"> 

<div id="promovid"> 
    <div class="custom-th"> 
     <img src="http://edigi.co/blank.png" id="imageID" width="100%" height="370" />  
    </div> 

    <div id="thevideo" style="display:none; padding: 0px;"> 
     <center> 
     <video onclick="this.play();" preload="auto" width="600" height="370"> 
      <source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/> 
     </video> 
     </center> 
    </div> 

</div> 
</div>

任何幫助表示讚賞，但由於我不是最好的腳本一個實際的例子，或編輯的jsfiddle，將完全超真棒。

在此先感謝您的幫助。

來源

2013-06-25 Eric Malcolm

只需添加一個$("video").click();

像這樣：

$(document).ready(function() { 
     $('.custom-th').click(function() { 
      $('.custom-th').fadeOut('fast', function() { 
       $("#thevideo").css("display","block"); 
       $("video").click(); 
      }); 
     }); 
});

添加ID的視頻，如果你有在頁面上多部影片，並用它的ID，而不是在選擇「視頻」。

來源

2013-06-25 14:13:06 Iansen

非常感謝，我是想： video.addEventListener（ '點擊'，函數（）{ video.play（）;} 較大，不勝感激 –

@lansen現在，他們想要的形象。在視頻播放後回來，以便他們可以再播放一次，如果他們想要的話。有沒有辦法做到這一點？我能想到的唯一的事情就是刷新頁面 –

只需監聽視頻觸發的事件並添加它回來看看這個：http://stackoverflow.com/questions/2741493/how-do-you-detect-html5-video-events – Iansen

如何隱藏onclick圖像並播放隱藏在其下的視頻？

回答

相關問題