video标签加载视频的时候中间的黑色loading圈圈怎么删除啊

用了video标签加载视频,缓冲的时候,中间的黑色loading圈圈怎么隐藏啊,没找到对应的属性,有人给解答一下吗,万分感谢

基于new bing部分指引作答:
对于 video 标签加载视频时的缓冲过程中的黑色 loading 圈圈,可以通过 CSS 添加样式来隐藏。下面是一个示例:

<style>
  .video-buffering::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #ccc;
    border-top-color: #000;
    animation: spin 1s infinite linear;
  }

  @keyframes spin {
    0% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }
</style>

<video id="myVideo" controls>
  <source src="your-video-source.mp4" type="video/mp4">
</video>

<script>
  var video = document.getElementById('myVideo');
  video.addEventListener('waiting', function() {
    video.classList.add('video-buffering');
  });

  video.addEventListener('playing', function() {
    video.classList.remove('video-buffering');
  });
</script>

在上述示例中,我们使用了一个伪元素 ::after 来创建一个圆形的 loading 动画,利用了 CSS 的动画属性 animation 实现旋转效果。当 video 标签的等待事件 waiting 触发时,会为 video 添加名为 video-buffering 的类,显示 loading 动画;当播放事件 playing 触发时,会移除 video-buffering 类,隐藏 loading 动画。

请将示例代码中的 "your-video-source.mp4" 替换为您实际视频的源文件路径。您还可以根据需要调整 loading 动画的样式和大小。

如果您使用的是其他 JavaScript 库或框架(如 jQuery)加载视频,也可以通过类似的事件监听和样式控制方式来实现 loading 圈圈的显示和隐藏。

没办法隐藏

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7769478
  • 这篇博客你也可以参考下:给video视频自定义添加中间播放按钮
  • 以下回答来自chatgpt:

    我可以帮助你解决这个问题。

    要隐藏video标签加载时的loading圈圈,你可以使用CSS样式来覆盖默认的浏览器样式。具体步骤如下:

    1. 首先,将视频标签包裹在一个容器元素内,例如一个div:
    <div id="video-container">
      <video controls>
        <source src="your-video-source.mp4" type="video/mp4">
      </video>
    </div>
    
    1. 接下来,在CSS中为这个容器元素设置一个背景图片,用于隐藏加载时的圈圈。你可以选择一张透明的图片或者其他的占位图:
    #video-container {
      background: url('path-to-your-image.png') no-repeat center center;
    }
    
    1. 对于视频加载完成后的播放按钮,你可以使用CSS选择器来指定其样式:
    #video-container video::-webkit-media-controls-start-playback-button {
      display: none !important;
    }
    

    在上述代码中,我使用了WebKit私有的CSS选择器,用于隐藏播放按钮。如果对于其他浏览器的兼容性有要求,你可能需要使用其他的选择器。

    1. 最后,你可能需要为视频容器设置一些合适的宽度和高度,以确保视频可以正常显示:
    #video-container {
      width: 100%;
      height: auto;
    }
    

    请将上述CSS代码添加到你的样式文件或者页面样式块中。这样,当视频加载时,loading圈圈会被背景图片隐藏,同时播放按钮也会被隐藏。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^