解决前端使用video标签在Chrome浏览器出现播放一次不能再次播放和不能拖动进度条问题_chrome中video进度条拖动失效

先来说一下我的情况：后台提供了一个get请求的接口直接返回，只能通过服务器http请求返回视频流（类似：http://127.0.0.1:8181/file?name=movie.mp4），然后我就直接把这个字符串放到video标签的src属性中，出现了两个问题：1.在Chrome浏览器不能再次播放（我尝试了FireFox浏览器是正常的，而这个需求只在Chrome浏览器内核上实现所以没有尝试其他浏览器。）；2.在Chrome浏览器上不能拖动滚动条。一下是我的解决办法。

1. 在chrome浏览器不能再次播放

查询ChatGPT之后得到了结果，使用 video 标签播放数据流视频，但是播放一次之后重新播放会直接到视频最后一秒，可能是由于视频流被关闭或者 video 元素的缓存所致。

在播放一次视频流之后，视频流可能会被关闭，此时 video 元素将无法再次播放。如果您需要多次播放视频流，可以在视频流关闭之前尝试重新播放视频流。这可以通过监听 video 元素的 ended 事件来实现。当视频播放结束时，可以将 video 元素的 currentTime 属性设置为 0，以重新开始播放视频流。以下是一个示例代码：

var video = document.getElementById('myVideo');

function startStream() {
  var streamUrl = 'your_stream_url';
  video.src = streamUrl;
  video.play();
}

video.addEventListener('ended', function() {
  video.currentTime = 0;
  video.play();
});
1
2
3
4
5
6
7
8
9
10
11
12

上述代码中，我们在开始播放视频流时，使用 startStream() 函数来设置 video 元素的 src 属性并调用 play() 方法开始播放视频流。在播放结束时，我们监听 video 元素的 ended 事件，并在事件触发时将 video 元素的 currentTime 属性设置为 0，以重新开始播放视频流。

另外，video 元素的缓存可能会导致播放一次之后无法重新播放视频流。为了避免这种情况，您可以在播放结束时，将 video 元素的 src 属性设置为空字符串，然后再次设置为视频流的 URL。这将会强制清空视频缓存，以确保视频可以重新播放。以下是一个示例代码：

var video = document.getElementById('myVideo');

function startStream() {
  var streamUrl = 'your_stream_url';
  video.src = streamUrl;
  video.play();
}

video.addEventListener('ended', function() {
  video.src = '';
  video.src = 'your_stream_url';
  video.play();
});
1
2
3
4
5
6
7
8
9
10
11
12
13

上述代码中，我们在播放结束时，将 video 元素的 src 属性设置为空字符串，然后再将其设置为视频流的 URL，并调用 play() 方法重新开始播放视频流。这将会清空视频缓存，并确保视频可以重新播放。

2. 在chrome浏览器不能拖动进度条

通过搜索找到需要后端在此接口的请求头增加一些参数：
accept-ranges和content-length的缺失（验证发现缺一不可）导致的进度控制失效
参考链接：https://zhuanlan.zhihu.com/p/149794934
https://blog.csdn.net/hudaijun/article/details/87456583