在html中再次播放视频后循环html5视频获取黑屏

问题描述 投票:5回答:3

我已经添加了一个用于播放视频作为横幅的代码,但面临一个问题,即视频完成后立即获得黑屏并再次播放视频。

<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>
html css
3个回答
1
投票

我已经修改了你的标签,包括autoplay loop而不是autoplay="true" loop="loop"

我还认为你的HTML语法有点不对 - 而不是把源代码放在<source>标签中,你应该在src=""标签中包含一个<video>,如下所示:

<div class="background-wrap">
  <video id="video-bg-elem" preload="auto" autoplay loop muted="muted" width="100%" height="400" src="https://app.coverr.co/s3/mp4/Over-the-Map.mp4" type="video/mp4"></video>
</div>

正如您所看到的,在此循环视频的末尾没有黑屏。如果您仍然使用自己的材料进行拍摄,那么实际上您的视频可能会在最后有一点差距吗?


1
投票

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

  <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/


0
投票

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

<video muted autoplay loop>
    <source src="" type="video/mp4" />
</video>
© www.soinside.com 2019 - 2024. All rights reserved.