html5 视频播放器在音量更改时重新加载

Question

我的网站上有一个 HTML5 视频播放器，它可以播放 ogg 视频(我知道，它只在 Chrome 和 Firefox 中受支持，但这不是现在的问题......)。我可以补充一点，我使用 FFMPEG 创建这些 ogg 视频，使用以下命令:

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 更改音量)，但没有发生类似的情况。视频继续播放，音量变了。

我真的很感激任何可能帮助我解决这个烦人问题的帮助......

谢谢!
罗伊。

Answer 1

这是使用卷 + 的工作示例和 - 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>