آفلاین
user-avatar

صدای ویدئو

10 ماه پیش
توسط حسام موسوی آپدیت شد
آفلاین
user-avatar
Mesusjk ( 16058 تجربه )
10 ماه پیش
تخصص : برنامه نویس جنگو و پایتون

سلام. وقتتون بخیر. یه ویدئو توی صفحه ام گذاشتم که کنترل هاشو خودم طراحی کردم. توی قسمت صدا، یه input با 'type='range گذاشتم.
توی جاوااسکریپتش نوشتم اگه مقدار این input تغییر کرد، صدای ویدئو هم نسبت به این هم تغییر کنه و آیکون صدایی که کنار این input هست، نسبت به مقدار input یا بی صدا بشه یا باصدا.
تا اینجا مشکلی نیست ولی میخوام اگه روی خود آیکون کلیک شد، مقدار input یا صفر بشه یا حالا یه عددی بشه و خود آیکون هم شکلش تغییر کنه.
مشکل اینجاست که فانشن اول و فانشن دوم موقعی که فراخوانی میشن، اختلال بینشون پیش میاد و وقتی با فانشن دوم صدا قطع شده، بخاطر یه دلیلی، باز هم صدا پخش میشه. بنظرتون مشکلش چیه؟

var video = document.getElementById("video");
var volumeSlider = document.getElementById("volume");
var sondImg = document.getElementById("sound-img");

function changeVolume() { // وقتی که مقدار اینپوت تغییر کرد
    video.volume = volumeSlider.value;

    if (volumeSlider.value == 0) {
        sondImg.innerHTML = "<img src='https://img.icons8.com/ios-filled/50/000000/sound-speaker.png' title='sound' />"; // آیکون بی صدا
    } else {
        sondImg.innerHTML = "<img src='https://img.icons8.com/ios-filled/50/000000/room-sound.png' title='sound' />"; // آیکون باصدا
    }
}

function changeVol() {  // وقتی که روی آیکون صدا کلیک شد
    video.volume = volumeSlider.value;

    if (volumeSlider.value == 0) {
        sondImg.innerHTML = "<img src='https://img.icons8.com/ios-filled/50/000000/room-sound.png' title='sound' onclick='changeVol()' />"; // آیکون باصدا
        volumeSlider.value = 0.40;
    } else {
        sondImg.innerHTML = "<img src='https://img.icons8.com/ios-filled/50/000000/sound-speaker.png' title='sound' onclick='changeVol()' />"; // آیکون بی صدا
        volumeSlider.value = 0;
    }
}
آفلاین
user-avatar
حسام موسوی ( 413016 تجربه )
10 ماه پیش
تخصص : طراح و برنامه نویس

از چه listener و بر روی چه المنتی استفاده کردید .
کدشو قرار بدید

برای ارسال پاسخ باید وارد سایت شوید