我已经添加了一个用于播放视频作为横幅的代码,但面临一个问题,即视频完成后立即获得黑屏并再次播放视频。
<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>
我已经修改了你的标签,包括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>
正如您所看到的,在此循环视频的末尾没有黑屏。如果您仍然使用自己的材料进行拍摄,那么实际上您的视频可能会在最后有一点差距吗?
我已在所有浏览器中对此进行了测试。请查看此标记中的属性,这也适用于您的情况。
<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/
这是我的html使我的视频自动播放和循环没有问题。试一试。
<video muted autoplay loop>
<source src="" type="video/mp4" />
</video>