【问题标题】: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。该图像应立即代替您的视频可见。如果您想加倍努力,可以在主体上设置背景颜色,以便用户在等待海报图片加载时看到它。

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

    【讨论】:

      猜你喜欢
      • 2014-01-04
      • 2014-04-14
      • 1970-01-01
      • 2015-06-04
      • 1970-01-01
      • 1970-01-01
      • 2015-02-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多