Question

我正在开发一个播放器，当页面加载时，代码会预加载视频的前10秒，而当用户要求开始观看时，播放器到达5秒后即会加载10影片的10秒片段，然后每70秒他将另外10片段加载到末尾，但是由于某种原因，他正在重新整理整个片段，并且没有将10片段加载到Google Chrome浏览器的“网络”标签中，如果我给console.log输入来自生成访问令牌的API的内容，它也会出现混乱，但是它是正确到达的，但是当需要使用令牌来进行请求并查看它时，一切都会改变，而没有甚至加载，由于使用令牌并位于数组中而将其包含在第九个或最后一个中，它会返回

9的意外状态码0

，但请求显示为正常，状态码为200 OK。有人可以帮我找出问题所在吗？

出现的另一个错误：

未捕获的DOMException：无法在上执行'appendBuffer' 'SourceBuffer'：此SourceBuffer仍在处理 'appendBuffer'或'remove'操作。

以正确的顺序打印来自API的错误请求和console.log：

https://i.stack.imgur.com/9t6yx.jpg

数据库中正确的顺序：

https://i.stack.imgur.com/xcHdY.png

JavaScript代码：

(function() {
    var sourceBuffer;
    var numberOfChunks = 599;
    var nextLoad = 0;
    var group = ["1", "9"];
    var firstGroup = ["0", "null"];
    var tokens = [];
    var video = document.getElementById('video');
    if (!window.MediaSource) {
      console.error('No Media Source API available');
      return;
    }
    var ms = new MediaSource();
    video.src = window.URL.createObjectURL(ms);
    ms.addEventListener('sourceopen', onMediaSourceOpen);
    function onMediaSourceOpen() {
      ms.duration = numberOfChunks * 10;
      sourceBuffer = ms.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
      sourceBuffer.addEventListener('updateend', nextSegment);
      sourceBuffer.mode = 'sequence';
      newFile(appendToBuffer, firstGroup);
    }
    function nextSegment() {
      loadAccordingTime();
      sourceBuffer.removeEventListener('updateend', nextSegment);
    }
    function appendToBuffer(videoChunk) {
      if (videoChunk) {
        sourceBuffer.appendBuffer(new Uint8Array(videoChunk));
      }
    }
    function newFile(callback, group) {
      if(group[1] == "null"){
      $.ajax({
        method: "POST",
        url: "videoplayback.php",
        data: {groupChunks: group, task: "generateTokens"}
      })
        .done(function( msg ) {
          var firstT = JSON.parse(msg);
        var xhr = new XMLHttpRequest();
      xhr.open('GET', "videoplayback.php?task=loadChunk&token=" + firstT['tokens'][0]);
      xhr.responseType = 'arraybuffer';
      xhr.onload = function(e) {
        if (xhr.status != 200) {
          console.warn('Unexpected status code ' + xhr.status + ' for 0');
          return false;
        }
        callback(xhr.response);
      };
      xhr.send();
        });
      }else{
        $.ajax({
        method: "POST",
        url: "videoplayback.php",
        data: {groupChunks: group, task: "generateTokens"}
      })
        .done(function( msg ) {
          tokens = JSON.parse(msg);
          var size = Object.keys(tokens['tokens']).length;
          for (var i = 0; i < size; i++) {
        var xhr = new XMLHttpRequest();
      xhr.open('GET', "videoplayback.php?task=loadChunk&token=" + tokens['tokens'][i]);
      console.log(tokens['tokens'][i]);
      xhr.responseType = 'arraybuffer';
      xhr.onload = function(e) {
        if (xhr.status != 200) {
          console.warn('Unexpected status code ' + xhr.status + ' for ' + i);
          return false;
        }
        callback(xhr.response);
      };
      xhr.send();
          }
        });
      }
  }
  function isEmpty(obj) {
  for(var prop in obj) {
      if(obj.hasOwnProperty(prop))
          return false;
  }
  return true;
  }
  function loadAccordingTime(){
    setInterval(function(){ 
  var tempo = $("#video").get(0).currentTime;
  if(nextLoad == 0){
    nextLoad = tempo + 5;
  }else{
    if(tempo >= nextLoad){
      nextLoad = tempo + 70;
      newFile(appendToBuffer, group);
      group[0] = parseInt(group[1]) + 1;
      group[1] = parseInt(group[1]) + 10;
      tokens = [];
    }
  }
    }, 1000);
  }
  })();

媒体源出现问题，单独反转电影场景

0 个答案: