HTML移动大小的背景视频？

所以我的网站有问题。当过我启动它作为其桌面版本，它打开了视频作为它想：https://edgaraxe.net/teamhusky/HTML移动大小的背景视频？

下面是视频代码：

<div class="background-wrap"> 
    <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
     <source src="video/husky.mp4" type="video/mp4"> 
     Video not supported 
    </video> 
</div>

但是如果我打开了手机版本，我得到一个黑色的屏幕。

是这里的任何方式，使移动版本打开视频？因为我在寻找解决方案，并且有人说它不支持在手机上播放视频。因此，有没有办法打开图像，而不是移动版本？

来源

2016-01-24 ed_laika

意见：白色背景上的白色文字是一个可怕的选择。 –

@Derek朕会功夫感谢您的咨询！ –

参数poster添加到您的video标签是这样的：

<video .... poster="PATH_TO_IMAGE" autoplay="false"> 
    .... 
</video>

来源

2016-01-24 19:42:28

谢谢你的帮助！ –

<video />标记具有poster属性，该属性将显示在支持video元素的设备上，但不支持自动播放。

<video poster="URL_TO_IMAGE" id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
    <source src="video/husky.mp4" type="video/mp4"> 
    Video not supported 
    </video>

来源

2016-01-24 19:36:51

或者您可以用JavaScript启动它... –

感谢您的帮助！ –

您可以以运行在多个浏览器（包括移动的）视频使用多种视频格式。因此，尝试添加一个.webm视频：

<div class="background-wrap"> 
    <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> 
     <source src="video/husky.mp4" type="video/mp4"> 
     <source src="video/husky.webm" type="video/webm"> 
     Video not supported 
    </video> 
</div>

来源

2016-01-24 19:39:45

我试过了，但它仍然是一个空白的屏幕！ –

也许你必须使用正确的编解码器或格式转换视频。检查[本网站]（https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats），其中包含与浏览器兼容的表格。 –

谢谢你的帮助！：D –

HTML移动大小的背景视频？

回答

相关问题