时间戳

首页 > 解决方案 > chrome html/css 音频/视频问题上的视频问题

html - chrome html/css 音频/视频问题上的视频问题

问题描述

我在网站上添加了一个视频，Internet Explorer 和 Edge 都可以，但是 chrome 中没有声音。

HTML 代码：

<div class="main">
   <video autoplay loop>
      <source src="media/main.mp4" type="video/mp4">
   </video>
</div>

CSS 代码：

.main {
   width: 100vw;
   height: 90vh;
   position:relative;
}

.main video{
   width: auto;
   height: auto;
   object-fit: cover;
   position:relative;
   z-index:0; 
   border: 1px solid white;
}

标签： htmlcss

解决方案

尝试添加元素id="video-background" plays-inline controls。<video>

我认为，播放视频时没有声音，因为出于某些安全原因，chrome 不喜欢带有声音的“自动播放”视频。
这比告诉用户更改设置以使视频播放声音等要好......
现在这将在 Chrome 中运行。

所以你的代码将是：

<div class="main">
   <video loop id="video-background" plays-inline controls>
      <source src="media/main.mp4" type="video/mp4">
   </video>
</div>

推荐阅读