کد پلی شدن ویدیو مثل اینستاگرام
سلام من با این کد ها ویدیو ساختم حالا مبخوام رویی یکیش میزنن بقیه اش رو پلی نشه الان همشو میشه باهم پلی کرد چیکار کنم که فقط یکیش پلی بسه ه بخوان اون ویدیو دیگه رو نگاه کنه قبلی پلی نشه یا رفتی از ویدیو میگذره پلی نشه باید چیکار کنم اینم کد
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <video class="video"> <source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" /> </video> <div class="playpause"></div> </div>.video { width: 100%; border: 1px solid black; } .wrapper{ display:table; width:auto; position:relative; width:50%; } .playpause { background-image:url(http://png-4.findicons.com/files/icons/2315/defaulticon/256/mediaplaypauseresume.png); background-repeat:no-repeat; width:50%; height:50%; position:absolute; left:0%; right:0%; top:0%; bottom:0%; margin:auto; background-size:contain; background-position: center; }$('.video').parent().click(function () { if($(this).children(".video").get(0).paused){ $(this).children(".video").get(0).play(); $(this).children(".playpause").fadeOut(); }else{ $(this).children(".video").get(0).pause(); $(this).children(".playpause").fadeIn(); } });ممنون میشم کمک کنیم یا اگه میشه رفتی از ویدیو رد میشه و میره پایین ویدیو پلی نشه دیگه
از این لینک پیدا کردم ممنون میشم کمکم کنید
https://stackoverflow.com/questions/39622153/jquery-video-overlay-button
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
0
0
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Html
<div class="wrapper">
<video class="video">
<source src="http://e14aaeb709f7cde1ae68-a1d0a134a31b545b257b15f8a8ba5726.r70.cf3.rackcdn.com/projects/31432/1427815464209-bf74131a7528d0ea5ce8c0710f530bb5/1280x720.mp4" type="video/mp4" />
</video>
<div class="playpause"></div>
</div>
Css
.video {
width: 100%;
border: 1px solid black;
}
.wrapper{
display:table;
width:auto;
position:relative;
width:50%;
}
.playpause {
background-image:url(http://png-4.findicons.com/files/icons/2315/default_icon/256/media_play_pause_resume.png);
background-repeat:no-repeat;
width:50%;
height:50%;
position:absolute;
left:0%;
right:0%;
top:0%;
bottom:0%;
margin:auto;
background-size:contain;
background-position: center;
}
Js
$('.video').parent().click(function () {
if($(this).children(".video").get(0).paused){
$(this).children(".video").get(0).play();
$(this).children(".playpause").fadeOut();
}else{
$(this).children(".video").get(0).pause();
$(this).children(".playpause").fadeIn();
}
});
0