Как сделать ползунок громкости для html5 video через jquery?

Question

[Алексей Черток]

Всем привет. Подскажите пожалуйста как сделать ползунок громкости для html5 video плеера.

Вот код:

<video id="video" src="video/video.mp4" poster="img/wall.jpg" width="745" height="320"></video>
    <div class="playerControls">
        <div class="playerPlace">
            <div class="playerPlay">
                <div class="playerPlayIcon"><i class="flaticon-arrows"></i></div>
                <div class="playerPauseIcon"><i class="flaticon-player"></i></div>
            </div>
            <div class="playerProgress">
                <div class="playerProgressContent"><div class="playerProgressLine"></div></div>
            </div>
            <div class="playerTime"></div>
            <div class="playerVolumeIcon">
                <div class="playerVolumeMute1"><i class="flaticon-technology"></i></div>
                <div class="playerVolumeMute2"><i class="flaticon-technology-1"></i></div>
            </div>
            <div class="playerVolume">
                <div class="playerVolumeContent"><div class="playerVolumeLine"></div></div>
            </div>
            <div class="playerScreen"><i class="flaticon-signs"></i></div>
        </div>
    </div>

Т.е. playerVolumeLine нужно дописывать во первых ширину, а во вторых сделать чтобы можно было мышкой ровнять громкость. Спасибо заранее.

Answer 1

[Андрей Молчанов]

Можно через input type="range"
Привожу пример кода который использую сам:

<input id="jcp-volume" type="range" min="0" max="10" value="5" step="0.1" />

И изменение громкости можно подцепить с помощью JQuery.

$("#jcp-volume").mousemove(function(){
   audio.volume = parseFloat(this.value / 10);
});

Как раз срабатывает в реальном времени, при изменении мышью.
Переменная audio - аудио объект Audio()
В вашем случае video - Video() , в общем нужно смотреть на код который у вас обрабатывает плеер )))