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

На моем веб-сайте есть видеоплеер HTML5, который воспроизводит видео в формате ogg (я знаю, что он поддерживается только в Chrome и Firefox, но сейчас это не проблема...). Я мог бы добавить, что я создаю эти видео ogg, используя FFMPEG, с помощью следующей команды:

fmpeg -ss 0 -re -i INPUT_VIDEO -b:a 128k -ac 2 -acodec libvorbis -b:v 1024k -vcodec libtheora -strict 2 -pix_fmt yuv420p -threads 4 -r 25 -f ogg OUTPUT_VIDEO

Всякий раз, когда я пытаюсь установить громкость с помощью JS, мое видео перестает воспроизводиться, перезагружает свой носитель и затем запускается снова. Если я проверю мультимедийные события html5, я увижу, что событие «ожидание» возникает сразу после того, как я устанавливаю громкость, а затем, когда видео снова начинает воспроизводиться, возникает событие «воспроизведение». Однако событие «пауза» никогда не возникает, даже если видео приостанавливается на несколько секунд.

Я создаю элемент видео с помощью Javascript с помощью этого кода:

var MyPlayer = function(videoId) {
    this.createVideoDiv(videoId);
    this.createVideo();
}

MyPlayer.prototype.createVideoDiv = function(videoId) {
    var videoDiv = document.createElement('div');
    videoDiv.id = videoId;
    videoDiv.setAttribute('class', "fg_video_div");
    videoDiv.style.position = "fixed";

    this.videoDiv = videoDiv;
}

MyPlayer.prototype.createVideo = function() {
    var video = document.createElement('video');

    video.style.height = '100%';
    video.style.width = '100%';
    video.setAttribute('preload', 'auto');
    this.videoDiv.appendChild(video);
    this.video = video;
}

Затем я использую следующий (простой) код для установки громкости в моем видеоплеере html5:

this.video.volume = 0.5;

Ошибка воспроизводится как в Firefox, так и в Chrome.

Кто-нибудь когда-нибудь сталкивался с чем-то подобным? Я пытался смоделировать ту же процедуру на других веб-сайтах (попробуйте изменить громкость с помощью JS с помощью инструментов разработчика), но ничего подобного не происходит. Видео продолжает воспроизводиться, а громкость меняется.

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

Спасибо! Рои.


html ffmpeg video-streaming html5-video ogg
person Roee    schedule 18.01.2016    source источник
comment
Какую область действия имеет this? Лучше опубликовать больше о коде JS. Вы можете сослаться на элемент Video document.getElementById('video').volume = 0.5   -  person Maxali    schedule 18.01.2016
comment
Я обновил свой вопрос, указав, как я создаю видео, и инициирую this.video. Спасибо, но я не думаю, что это причина моей проблемы...   -  person Roee    schedule 19.01.2016

Ответы (1)


arrow_upward
1
arrow_downward

Вот рабочий пример использования тома + и - jsfiddle.

Я добавил элемент source в метод createVideo(), так как его нет в предоставленном коде.

Я добавил две кнопки и обработал событие клика.

var vid = new MyPlayer('testPlayer');
document.getElementById('body').appendChild(vid.videoDiv);
document.getElementById('addvolume').addEventListener('click', function(){
    vid.video.volume+=0.1;
  console.log(vid.video.volume);

});
document.getElementById('minusvolume').addEventListener('click', function(){
    vid.video.volume-=0.1;
  console.log(vid.video.volume);
});


console.clear();
var MyPlayer = function(videoId) {
  this.createVideoDiv(videoId);
  this.createVideo();
}

MyPlayer.prototype.createVideoDiv = function(videoId) {
  var videoDiv = document.createElement('div');
  videoDiv.id = videoId;
  videoDiv.setAttribute('class', "fg_video_div");
  videoDiv.style.position = "fixed";

  this.videoDiv = videoDiv;
}
MyPlayer.prototype.volPluss = function() {
  this.video.volume += 0.1;
}
MyPlayer.prototype.createVideo = function() {
  var video = document.createElement('video');
  video.setAttribute('controls', '');
  video.style.height = '100%';
  video.style.width = '100%';
  video.setAttribute('preload', 'auto');

  // add source
  var source = document.createElement('source');
  source.src = "http://techslides.com/demos/sample-videos/small.ogv";
  source.type = "video/ogg";
  video.appendChild(source);

  this.videoDiv.appendChild(video);
  this.video = video;
}


var vid = new MyPlayer('testPlayer');
document.getElementById('container').appendChild(vid.videoDiv);
document.getElementById('addvolume').addEventListener('click', function() {
  vid.video.volume += 0.1;
  console.log(vid.video.volume);

});
document.getElementById('minusvolume').addEventListener('click', function() {
  vid.video.volume -= 0.1;
  console.log(vid.video.volume);
});
.btn {
  background: #3498db;
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px;
  margin: 20px 0px;
  text-decoration: none;
  display: inline;
}

.vol {
  width: 50px;
  height: 15px;
}
<div id="container">
  <h1 id="addvolume" class="btn vol">Vol ++</h1>
  <h1 id="minusvolume" class="btn vol">Vo --</h1>
</div>

person Maxali    schedule 19.01.2016