Question

我的网站上播放了一段视频它适用于我测试过的除Google Chrome之外的所有浏览器。

视频播放但是真的很生涩。

我如何解决这个问题，有时会卡住，然后玩，然后卡住等等。

这是我的代码

<video autoplay="autoplay" loop="loop" preload="auto" muted="muted" poster="images/backscreen.jpg" width="640" height="360">
    <source src="videos/footage_test.mp4" type="video/mp4" />
    <object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <img alt="Backscreen" src="images/backscreen.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
    </object>
</video>

Answer 1

你真的没有办法解决这个问题。您的描述没有足够的具体信息来确定确切原因，但可能是其中之一：

您没有足够的带宽来支持流式视频（在客户端或服务器端）
Chrome用于播放的编解码器与其他浏览器不同。您正在使用Flowplayer，因此可能在Chrome中使用HTML 5，而在其他浏览器中使用Flash，留下各种实现差异，包括编解码器选择。（例如，可以使用硬件编解码器。）

Answer 2

我遇到了同样的问题，发现可以通过为视频源网址设置Cache-Control，ETag和Expires响应标头来解决这个问题。

如果您还没有这样做，您可能还想设置Content-Range，Accept-Ranges，Content-Length和Content-Type。

这是使用nodejs

实现此目的的方法

fs.stat(path, function(err, stat) {
  if (err) Error(err);
  var positions = req.headers.range.replace(/bytes=/, "").split("-");
  var start = parseInt(positions[0], 10);
  var total = stat.size;
  var end = positions[1] ? parseInt(positions[1], 10) : total - 1;
  var chunksize = (end - start) + 1;
  res.writeHead(206, {
    'Content-Range': 'bytes ' + start + '-' + end + '/' + total,
    'Accept-Ranges': 'bytes',
    'Content-Length': chunksize,
    'Content-Type': 'video/mp4',
    'Cache-Control': 'public, max-age=2592000',
    'ETag': stat.md5Hash,
    'Expires': new Date(Date.now() + 2592000000).toUTCString(),
  });
  // Send file stream
  sendStream(path, start, end);
});

Chrome生涩的视频HTML

2 个答案: