переключение с изображения профиля в основное видео

Я делаю страницу профиля, на которой при щелчке изображения профиля изображение скрывается, а нижний клип становится видимым и воспроизводится. Затем, когда видео кликнуто, видео скроется, и изображение снова отобразится. Вот код, который я должен выполнить в первой части, но он не работает.переключение с изображения профиля в основное видео

<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 вы можете достичь его, как это, но вы должны удалить якорь и событие анкера с идентификатором #togglepicture

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

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

источник

2015-02-11 19:37:20 Burimi

переключение с изображения профиля в основное видео

ответ

Смежные вопросы