Question

我正在尝试将视频添加到网页的轮播中，但是视频正在显示而不是在播放，所有按钮（例如播放/声音/暂停/缓冲）都在显示中，但是视频没有在播放。仅当我将其全屏播放并单击播放按钮时，该视频才会播放。播放后，如果我转义为全屏模式，它仍在播放。因此，如何包含自动播放功能以避免仅在单击全屏时播放视频？

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
  <div class="item active">
            <video width="1400" autoplay="autoplay" height="400" controls>
  <source src="movie.mp4" type="video/mp4">
     </video>

  </div>
  <div class="item">
    <img src="https://placehold.it/1200x400?text=Another Image Maybe" alt="Image">
    <div class="carousel-caption">
    </div>      
  </div>
</div>

Answer 1

您缺少一个“！”

<video width="1400" autoplay="autoplay" height="400" controls>

会是正确的

Answer 2

使用autoplay代替autoplay="autoplay"

在height之前，您还遇到语法错误，因此缺少双引号。

<video width="1400" autoplay="autoplay height="400" controls>

这是可行的例子

<video width="400" controls autoplay>
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
    </video>

Answer 3

您可以尝试使用playsinline，它对我有用。

<video playsinline="playsinline" width="1400" autoplay="autoplay" height="400" muted="muted" loop="loop">
    <source src="movie.mp4" type="video/mp4">
</video>

视频无法在轮播中播放

3 个答案: