محمد
3 سال پیش توسط محمد مطرح شد
3 پاسخ

کد پلی شدن ویدیو مثل اینستاگرام

سلام من با این کد ها ویدیو ساختم حالا مبخوام رویی یکیش میزنن بقیه اش رو پلی نشه الان همشو میشه باهم پلی کرد چیکار کنم که فقط یکیش پلی بسه ه بخوان اون ویدیو دیگه رو نگاه کنه قبلی پلی نشه یا رفتی از ویدیو میگذره پلی نشه باید چیکار کنم اینم کد

<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


ثبت پرسش جدید
b.nik
تخصص : آزاد
@b.nik 3 سال پیش مطرح شد
0

لطفا کد رو داخل بخش مخصوص به بارگزاری کد بزارید
هیچیش مشخص نیست الان


محمد
تخصص : دانشگاه
@mmdtam 3 سال پیش آپدیت شد
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();
    }
});

محمد
تخصص : دانشگاه
@mmdtam 3 سال پیش مطرح شد
0

کسی میتونه کمک کنه


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام