從配置文件圖像切換到基礎視頻

我正在創建一個配置文件頁面，當點擊配置文件圖片時，圖像隱藏並且潛在的短片段變爲可見並播放。然後當點擊視頻時，視頻會隱藏，圖像將再次顯示。這是我必須執行第一部分但不起作用的代碼。從配置文件圖像切換到基礎視頻

<html> 
<head> 
<style type="text/css"> 
#avatar { 
width: 200px; 
height: 200px; 
position: relative; 
} 

.picture { 
position:absolute; 
top:0px; 
left:0px; 
} 

#playbutton { 
margin-left: auto; 
margin-right: auto; 
position:absolute; 
top: 50px; 
left: 50px; 
} 


.video 
{ 
position:absolute; 
top: 0px; 
left: 0px; 
width: 200px; 
height: 200px; 
visibility: hidden; 

} 


</style> 
</head> 
<body> 
<section class=pictureandvideo> 
    <a id=togglepicture href="#"> 
    <div class=picture> 
     <img id=avatar src="avatar.jpg"></img> 
     <img id=playbutton src="opagueplayicon.png"></img> 



// The playbutton icon hovers over the avatar. Both make up the collective image. 

    </div> 



    <div class=video> 

     // Video underlying the image 

     <video id=video1 width="200" height="200"> 
     <source src="Produce_0.mp4" type="video/mp4"> 
     <source src="Produce_0.ogg" type="video/ogg"> 
     </video> 
    </div> 
    </a> 

</section> 
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/> 
<script> 
$('#togglepicture').click(function({$(this).children('.picture').toggle('fast').find('.video').css('visibility','visible').get(0).play()}); 
</script> 


</body> 
</html>

來源

2015-02-11 Emedi Ekpenyong

使用jQuery就可以實現像這樣，但你必須刪除錨點和事件到錨ID爲#togglepicture

$(".picture").click(function(){ 
$(this).hide(); 
$(".video").show(); 
}); 

$(".video").click(function(){ 
$(this).hide(); 
$(".picture").show(); 
});

來源

2015-02-11 19:37:20 Burimi

從配置文件圖像切換到基礎視頻

回答

相關問題