html5 video player reloads upon volum change

Question

I have a HTML5 video player in my website, which plays ogg videos (it is only supported in Chrome and Firefox, I know, but that's not the issue right now...). I might add that I create these ogg videos using FFMPEG, with the following command:

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

Whenever I try to set the volume using JS, my video stops playing, reloads its media and then starts again. If I check the html5 media events, I see that "waiting" event is raised right after I set the volume, and then when the video starts playing again, 'playing' event is raised. However, 'pause' event is never raised, even though the video does pause for a few seconds.

I create the video element using Javascript, with this code:

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;
}

Then, I use the following (simple) code to set the volume on my html5 video player:

this.video.volume = 0.5;

The bug reproduces in both Firefox and Chrome.

Has anyone ever encountered anything like that? I've tried to simulate the same procedure in other websites (try to change the volume using JS via dev tools), but nothing like that happens. The video keeps playing, and the volume is changed.

I would really appreciate any help that might help me solve this annoying issue...

Thanks! Roee.

What scope does this have? Its better to post more about the JS code. You can reference the Video element document.getElementById('video').volume = 0.5 — Maxali
I've updated my question with the way I create the video, and initiate this.video. Thanks, but I don't think that's the cause to my issue... — Roee

Maxali Maxali · Accepted Answer · 2016-01-19T09:14:27

Here is a working example of using volume + and - jsfiddle

I added source element in createVideo() method since you don't have this in the provided code.

I added two buttons and handled click event.

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>

html5 video player reloads upon volum change

1 Answers