Question

在This example中，我可以移动Chrome中的进度条。但是在this example我无法移动Chrome中的进度条（它甚至不会在Safari中加载）。两个HTML文件之间的唯一区别是工作示例是从http://vjs.zencdn.net/v/oceans.mp4加载视频，而非工作的视频从http://test.nrtsalespro.com/system/files/video_server/uploaded_videos/oceans.mp4加载

所以，我最好的猜测是两个不同的服务器以不同的方式提供文件。但是我该如何解决这个问题呢？什么服务器/目录设置可能导致此问题？

<html>
<head>
  <link href="http://vjs.zencdn.net/6.6.3/video-js.css" rel="stylesheet">
</head>

<body>
  <video id="my-video" class="video-js" controls preload="auto" width="658" height="395"
  poster="http://via.placeholder.com/658x395" data-setup="{}">
    <source src="http://test.nrtsalespro.com/system/files/video_server/uploaded_videos/oceans.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

  <script src="http://vjs.zencdn.net/6.6.3/video.js"></script>
</body>
</html>

Answer 1

Video.js's troubleshooting guide是一个很好的起点，因为它解决了这个问题，尽管这个特殊问题对于HTML5视频而言并非特别针对Video.js。

服务器必须支持html5视频播放的字节范围请求才能工作。否则浏览器无法在缓冲范围之外寻找，因此Chrome上的行为也是如此。 Safari采用更难以阻止回放的方式;他们认为最好确保您立即意识到主机存在问题。

如何解决Chrome中的进度条问题

1 个答案: