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通过开发工具来改变音量），但不会发生这种情况。视频继续播放，音量也随之改变。

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

谢谢！ Roee。

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>

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

1 个答案: