Javascript 如何使用媒体源扩展以无缝循环方式播放视频_Javascript_Html_Video_Msdn_Media Source

Javascript 如何使用媒体源扩展以无缝循环方式播放视频

javascript html video

Javascript 如何使用媒体源扩展以无缝循环方式播放视频,javascript,html,video,msdn,media-source,Javascript,Html,Video,Msdn,Media Source,我正在进行媒体源扩展，以便在无缝循环中毫不延迟地播放视频。我对它进行了广泛的研发，也做了不同的事情。现在我正在编写这个代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <video controls></video> <script> var vid

我正在进行媒体源扩展，以便在无缝循环中毫不延迟地播放视频。我对它进行了广泛的研发，也做了不同的事情。现在我正在编写这个代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <video controls></video>
    <script>
      var video = document.querySelector('video');
      var assetURL = 'test1.mp4';
      // Need to be specific for Blink regarding codecs
      // ./mp4info frag_bunny.mp4 | grep Codec
      var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
      if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        var mediaSource = new MediaSource;
        //console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
      } else {
        console.error('Unsupported MIME type or codec: ', mimeCodec);
      }
      function sourceOpen (_) {
        //console.log(this.readyState); // open
        var mediaSource = this;
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        fetchAB(assetURL, function (buf) {
          sourceBuffer.addEventListener('updateend', function (_) {
            mediaSource.endOfStream();
            video.play();
            //console.log(mediaSource.readyState); // ended
          });
          sourceBuffer.appendBuffer(buf);
        });
      };
      function fetchAB (url, cb) {
        console.log(url);
        var xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
          cb(xhr.response);
        };
        xhr.send();
      };
    </script>
  </body>
</html>


var video=document.querySelector（'video'）；
var资产='test1.mp4'；
//关于编解码器，需要特别说明闪烁
//./mp4info frag_bunny.mp4 | grep编解码器
var mimeCodec='视频/mp4；编解码器=“avc1.42E01E，mp4a.40.2”；
if（&&MediaSource.isTypeSupported（mimeCodec））窗口中的（'MediaSource'））{
var mediaSource=新的mediaSource；
//console.log（mediaSource.readyState）；//已关闭
video.src=URL.createObjectURL（mediaSource）；
mediaSource.addEventListener（'sourceopen'，sourceopen）；
}否则{
错误（'不支持的MIME类型或编解码器：'，mimeCodec）；
}
函数sourceOpen（3;）{
//console.log（this.readyState）；//打开
var mediaSource=this；
var sourceBuffer=mediaSource.addSourceBuffer（mimeCodec）；
fetchAB（资产、功能（buf）{
sourceBuffer.addEventListener（'updateend'，函数（\ux）{
mediaSource.endOfStream（）；
video.play（）；
//console.log（mediaSource.readyState）；//结束
});
sourceBuffer.appendBuffer（buf）；
});
};
函数fetchAB（url，cb）{
console.log（url）；
var xhr=新的XMLHttpRequest；
xhr.open（'get'，url）；
xhr.responseType='arraybuffer'；
xhr.onload=函数（）{
cb（xhr.响应）；
};
xhr.send（）；
};

它工作正常，但视频再次播放时略有延迟。我想毫不拖延地播放视频，我知道有媒体源扩展是可能的，但在花了很多时间之后，我仍然不知道该怎么做。任何帮助都将不胜感激。感谢

将

模式

值设置为

序列

对我有效，它确保了连续的媒体播放，无论媒体段时间戳是否不连续

sourceBuffer.mode = 'sequence';

也许这段代码可以解决你的问题……毫不延迟地无缝循环播放视频

for (let chunk of media) {
        await new Promise(resolve => {
          sourceBuffer.appendBuffer(chunk.mediaBuffer);
          sourceBuffer.onupdateend = e => {
            sourceBuffer.onupdateend = null;
            sourceBuffer.timestampOffset += chunk.mediaDuration;
            console.log(mediaSource.duration);
            resolve()
          }
        })

      }

如果您需要更多信息，请访问此链接。。。。。

嘿，你有没有用过这个？我也遇到了同样的问题。视频标签（在HTML中，除了“控件”）可以获得“自动播放”属性。不为你工作？您也可以通过js-video.autoplay=true/false来处理此问题。您是否试图绕过在

autoplay

视频上强制使用

mute

属性的策略，如这里所述：？我个人对autoplay不感兴趣，在这个问题中也没有提到它。我对无缝循环感兴趣——在播放一段媒体内容和仍然能够在相同的持续时间内正确搜索之间没有延迟。无论我怎么做，我都会在内容循环之间获得几百毫秒的延迟（在移动设备上更糟）。现在我想起来了，也许我应该打开我自己的问题。视频必须被加载到内存中才能播放。这可能是导致这种行为的原因吗？尝试过这个方法，但它在循环之前仍然表现出轻微的停顿。在Chrome手机、桌面和Firefox上进行测试。我发现唯一有效的方法是等待timeupdate事件，并在它到达终点之前将相同的事件附加到终点（因此真正无缝播放），但这意味着持续时间延长，每个循环的内存使用量略有增加，并且我必须为我的视频播放器的chrome伪造持续时间。