Приостановка видео не останавливает звук в теге html5 video

Я приостанавливаю видео с помощью метода pause().. проблема в том, что звук продолжает воспроизводиться... Я также попытался приостановить его с Javascript Console в Firefox... ничего не происходит. Видео находится в формате .ogg и даже не воспроизводится в Chrome (потому что я думаю, что он не поддерживается). Я размещал видео на Amazon S3, и оно прекрасно транслировалось. Я создаю элемент динамически, загружая его информацию из запроса JSON. Вот какой код:

function showVideo() {
        var video = videodata;

        var videobox = $('#videobox').first();
        var videoplayer = document.getElementById('videoplayer');

        if (video.Enabled) {
            if ((videoplayer != null && videoplayer.currentSrc != video.Location) || videoplayer == null) {
                console.log('Creating video elem');
                videobox.empty();
                videobox.append('<video id="videoplayer" preload="auto" src="' +
                  video.Location + '" width="100%" height="100%" autoplay="autoplay" loop="loop" />');
                videobox.show();
            }
        } else {
            if (videoplayer != null) {
                videoplayer.pause();
                console.log('Pausing video...');
            }
            console.log('Deleting video elem');
            videobox.hide();
            videobox.empty();
        }
    }

Я уже отправил аналогичный вопрос раньше... но теперь я использую другие браузеры, поэтому я решил создать новый вопрос.

Вот рабочий код (спасибо пользователю heff!)

function showVideo() {
    var video = videodata;

    var videobox = $('#videobox').first();
    var videoplayer = document.getElementById('videoplayer');

    if (video.Enabled) {
        if ((videoplayer.src != video.Location) || videoplayer.src == '') {
            console.log('Playing video: ' + video.Location);
            videoplayer.src = video.Location;
            videoplayer.load();
            videoplayer.play();
            videobox.show();
        }
    } else {
        if (videoplayer.src != '') {
            console.log('Pausing video...');
            videoplayer.pause();
            videoplayer.src = '';
            videobox.hide();
        }
    }
}

Ответ 1

Мое предположение было бы то, что showVideo дважды вызывается каким-то образом и создает две копии, одна из которых продолжает играть даже после того, как вы вызываете паузу на другом.

В вашем коде видеопроигрыватель var не будет ссылаться на тег видео, который вы создаете позже, с добавлением, он укажет на все, что было раньше, и я предполагаю, что он удаляется, когда вы опустошаете поле, но можете придерживаться (и продолжать воспроизводить звук).

Просто мое лучшее предположение, но в любом случае было бы лучше использовать API-интерфейс видеоэлемента, чтобы установить исходный и другие параметры, а не освобождать поле и перестроить тег.

videoplayer.src = video.Location;
videoplayer.autoplay = true;
// etc.

Кроме того, 100% не является допустимым значением для атрибутов width/height. Вам нужно будет использовать CSS, чтобы растянуть видео, чтобы заполнить область.

Ответ 2

Привет, ребята, у меня была аналогичная проблема, которая была решена с помощью действительно замечательных кодеров. Проверьте этот пост. Это может быть очень полезно. HTML5 Управление видео не работает

Если вы используете атрибут html:

<video id="yourvideoID" poster="Pic.jpg" loop autoplay controls width="100%">
<source src="//example.website/InnovoThermometer.mp4" type="video/mp4">        
</video>