Получить аудиофайл для использования пользовательских элементов управления видео HTML 5

У меня есть видео html5 на странице и аудиофайл, который я хотел бы использовать в качестве фоновой музыки. Можно ли связать элементы управления звуком с элементами управления видео (отключение звука, громкость, воспроизведение, пауза и т. д.). Звук не может быть частью видеофайла, потому что видео приостанавливается, и я все еще хочу, чтобы фоновая музыка воспроизводилась и зацикливалась.

<video id="video" data-setup="{}" >
  <source src="video/MyVideo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="video/MyVideo.webmhd.webm" type='video/webm; codecs="vp8, vorbis"'>
  <source src="video/MyVideo.oggtheora.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <p>Your browser doesn't support HTML5. Maybe you should upgrade.</p>
</video>

<audio id="music" loop="loop">
    <source src="audio/background.ogg" type="audio/ogg" />
    <source src="audio/background.mp3" type="audio/mpeg" />
    <source src="audio/background.wav" type="audio/wav" />
    <p> Your browser doesn't support HTML5.  Maybe you should upgrade.</p>
</audio>

        <input type="button" value="PLAY" id="playpause" onclick="playOrPause()" class="button_play">
        <input type="button" value="Mute" id="mutebutton" onclick="muteOrUnmute()" class="button_play">
        <input type="button" value="+" onclick="document.getElementById('video').volume+=0.2" class="button">
        <input type="button" value="-" onclick="document.getElementById('video').volume-=0.2" class="button">

и немного JavaScript

    function playOrPause() {
        if (video.ended || video.paused) {
            video.play();
            document.getElementById("playpause").value="PAUSE";
        } else {
            video.pause();
            document.getElementById("playpause").value="PLAY";
                }   
        }

    var m = document.getElementById('mutebutton')[0];
    video.onvolumechange = function(e) {
    mutebutton.value = video.muted ? 'Unmute' : 'Mute';
        }


    function muteOrUnmute() {
        if (video.muted) {
            video.muted = false;
            document.getElementById("mutebutton").value="Mute";
        } else {
            video.muted = true
            document.getElementById("mutebutton").value="Unmute";
                }   
                return false;
        }

Я новичок в JavaScript и html5, поэтому буду признателен за любую помощь.


javascript html html5-video html5-audio
person Noob_C    schedule 11.01.2013    source источник
comment
Пожалуйста, объясните, что вы имеете в виду под звуком, который не может быть частью видеофайла, потому что видео приостанавливается, и я все еще хочу, чтобы фоновая музыка воспроизводилась и зацикливалась. Похоже, вам нужны два разных набора элементов управления: один для приостановки видео и для продолжения воспроизведения звука.   -  person dfmiller    schedule 14.01.2013
comment
@dfmiller Я хочу один набор элементов управления. Звук будет продолжать воспроизводиться после паузы видео, потому что звук зациклен, а звук в видео (и видео) будет останавливаться в определенных точках, для которых я написал Javascript. В идеале я просто хочу, чтобы звук начинал воспроизводиться при нажатии кнопки воспроизведения для видео, а затем управлялся только с помощью элементов управления отключением/включением звука и громкостью для видео.   -  person Noob_C    schedule 14.01.2013

Ответы (1)


arrow_upward
0
arrow_downward

Итак, я сделал переменную для своей музыки

var a =document.getElementById("music");

и чтобы соединить игровые функции вместе я добавил. a.play() к моей кнопке воспроизведения и к кнопкам отключения/включения звука я сделал это

function muteOrUnmute() {
        if (video.muted) {
            video.muted = false;
            a.muted = false;
            document.getElementById("mutebutton").value="Mute";
        } else {
            video.muted = true;
            a.muted = true;
            document.getElementById("mutebutton").value="Unmute";
                }   
                return false;
        }

Для управления громкостью вверх и вниз я сделал это:

    <input type="button" value="+" onclick="document.getElementById('video').volume+=0.2; document.getElementById('music').volume+=0.1" class="button">
    <input type="button" value="-" onclick="document.getElementById('video').volume-=0.2; document.getElementById('music').volume-=0.1" class="button">
person Noob_C    schedule 14.01.2013