HTML5视频不工作的平板电脑 [英] html5 video not working on tablet

问题描述

我在后台一个大的视频网站，我用HTML5视频吧。它所有我想在桌面上，我不能让它在平板电脑上的工作，虽然（不需要它在手机上） - 而不是一个视频我只看到一个黑色的背景。

I have a website with a big video in the background and I used HTML5 video for it. It does all I want on desktops, I can't make it work on tablets though (don't need it on mobiles) - instead of a video I see a black background only.

code如下：

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

难道是造成自动播放选项？如果是这样，有什么解决方法吗？
谢谢，
秒。

Is it caused by the autoplay option? If so, is there any workaround? Thanks, S.

推荐答案

在大多数移动浏览器（包括片 - 绝对的iPad），自动播放将无法工作。该浏览器将不会下载的任何的视频文件，而不是第一帧，甚至元数据的，直到有一些类型的用户互动活动 - 通常是点击或触摸

On most mobile browsers (including tablets - definitely iPad), autoplay will not work. The browser won't download any of the video file, not the first frame or even the metadata, until there's some kind of user interaction event - typically either a click or a touch.

可以做，以缓解这种状况的第一件事情是设置一个海报属性的视频元素，这是网址的海报图像。这种形象应该是可见的地方您的视频的时候了。如果你想多走一英里，你可以设置对身体产生的背景颜色，以便用户将看到，虽然他们正在等待海报图像加载。

The first thing you can do to alleviate the situation is to set a poster attribute on the video element, which is the URL to a poster image. That image should be visible right away in place of your video. If you want to go the extra mile, you can set a background color on the body so the user will see that while they're waiting for the poster image to load.

接下来，您可以添加一个触摸或点击事件监听任何你想要在用户与网页交互启动该视频立即打在文档中。

Next, you can add a touch or click event listener anywhere you want in the document that starts the video playing as soon as the user interacts with your web page.

这篇关于HTML5视频不工作的平板电脑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！