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

【问题标题】：html5 video player reloads upon volum changehtml5 视频播放器在音量更改时重新加载
【发布时间】：2016-01-18 17:34:13
【问题描述】：

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

如果能帮助我解决这个烦人的问题，我将不胜感激......

谢谢！罗伊。

【问题讨论】：

this 有什么作用域？最好发布更多关于 JS 代码的信息。您可以引用视频元素document.getElementById('video').volume = 0.5
我已经用我创建视频的方式更新了我的问题，并发起了this.video。谢谢，但我认为这不是我问题的原因......

标签： html ffmpeg video-streaming html5-video ogg

【解决方案1】：

这是一个使用音量 + 和 - jsfiddle 的工作示例

我在createVideo() 方法中添加了source 元素，因为您在提供的代码中没有这个元素。

我添加了两个按钮并处理了点击事件。

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>

【讨论】：