jQuery same class
I'm editing the way to control videos in html 5 for my project with layer
overlays and play and pause with one click. The problem is that im
controlling a lot of videos with the same class and when I play one video,
another video play, so i don't know how to solve it.
This my code.
jQuery
$(document).ready(function () {
$('.videobox').click(function () {
if ($('.test').get(0).paused) {
$('.videobox').css({
opacity: 0
});
$('.test').get(0).play();
} else {
$('.test').get(0).pause();
$('.videobox').css({
opacity: 0.5
});
}
e.preventDefault();
});
$('.test').bind("ended", function () {
$('.videobox').css({
opacity: 0.5
});
});
});
HTML
<div class="videobox" style="position: absolute; margin-left: 23px;
z-index: 500; background-color: #000; opacity: 0.5; width: 473px; height:
474px;">
<img src="image/camera.png" style="padding-top: 200px;">
</div>
<video class="test" width="473" height="474">
<source src="video.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">Your browser does not support
the video tag.
</video>
<div class="videobox" style="position: absolute; margin-left: 23px;
z-index: 500; background-color: #000; opacity: 0.5; width: 473px; height:
474px;">
<img src="image/camera.png" style="padding-top: 200px;">
</div>
<video class="test" width="473" height="474">
<source src="video.mp4" type="video/mp4">
<source src="movie2.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
No comments:
Post a Comment