当前位置:   article > 正文

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/468806
推荐阅读
相关标签
  

闽ICP备14008679号