Question

我添加了一个用于播放横幅广告的代码，但是面临一个问题，就是当视频完成播放时，黑屏会再次出现。

<div class="background-wrap">
  <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted" width="100%" height="400"><source src="http://localhost/blue/wp-content/uploads/2019/03/4K_UHD_Drone_Fly_Past_Radio_Tower_Portland_Oregon_Crest_Point_Fernando-1.mp4" type="video/mp4"></video></div>

Answer 1

我对您的标签做了一些修改，以包含dat <- read.table(text="Col1 Col2 Col3 Google '5 lines description' 'Name=ID273, ID288, ID299;' Yahoo '5 lines description' 'Name=ID3, ID28, ID2;'", header=T, strings=F) dat$Col3=lapply(gsub("Name=|;", "", dat$Col3[grepl('ID',dat$Col3)]), function(x)paste0("<a href=\"http://id=", trimws(unlist(strsplit(x, ',',fixed=T))), "\">", trimws(unlist(strsplit(x, ',',fixed=T))),"</a>", collapse=',')) dat$Col3=paste0('Name=',dat$Col3,';')而不是autoplay loop。

我还认为您的HTML语法略有错误-您应将autoplay="true" loop="loop"放在<source>标记中，而不是将其放入src=""标记中所以：

<video>

如您所见，此循环视频的结尾没有黑屏。如果您自己制作的素材仍在继续播放，那么实际上可能是您的视频结尾处有些许空白？

Answer 2

我已经在所有浏览器中对此进行了测试。请查看此标记中的属性，这同样适用于您的情况。

  <video width="400" controls playsinline loop muted >
      <source src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>

更新：Android和iOS上较新版本的手机浏览器确实支持自动播放功能。但是，只有在视频被静音或没有音频通道的情况下，它才起作用。：-）

有关UPDATE部分的更多详细信息，请阅读以下内容： https://webkit.org/blog/6784/new-video-policies-for-ios/

Answer 3

这是使我的视频自动播放和循环播放而没有问题的html。试试看。

<video muted autoplay loop>
    <source src="" type="video/mp4" />
</video>

再次在html中播放视频后，循环html5视频变黑

3 个答案: