html5 视频无法在平板电脑上播放答案

【问题标题】：html5 video not working on tablethtml5 视频无法在平板电脑上播放
【发布时间】：2014-08-19 10:02:05
【问题描述】：

我有一个网站，背景中有一个大视频，我使用了 HTML5 视频。它可以在台式机上完成我想要的一切，但我无法让它在平板电脑上运行（在手机上不需要它）——而不是视频，我只看到黑色背景。

代码如下：

<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="http://link/vid.mp4" type="video/mp4"/>
<source src="http://link/vid.ogv" type="video/ogg"/>
<source src="http://link/vid.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

它是由自动播放选项引起的吗？如果是这样，是否有任何解决方法？谢谢， S.

【问题讨论】：

标签： android html ipad video html5-video

【解决方案1】：

在大多数移动浏览器（包括平板电脑 - 肯定是 iPad）上，自动播放将不起作用。浏览器不会下载任何视频文件，不会下载第一帧甚至元数据，直到出现某种用户交互事件——通常是点击或触摸。

您可以做的第一件事是在视频元素上设置poster 属性，即海报图像的URL。该图像应立即代替您的视频可见。如果您想加倍努力，可以在主体上设置背景颜色，以便用户在等待海报图片加载时看到它。

接下来，您可以在文档中任意位置添加触摸或单击事件侦听器，以便在用户与您的网页交互时立即开始播放视频。

【讨论】：