Question

我在我的网站上嵌入了一个视频。 http://www.vaatasmart.com/application

我已嵌入以下代码。它在桌面浏览器中播放而不是在移动浏览器中播放。

HTML

<div id="container">
<video width="3000" height="380" loop autoplay="autoplay" />
    <source id="mp4" src="https://vaatasmart.squarespace.com/s/hv.mp4" type="video/mp4" />
</video>
</div>

CSS：

html, body {
   padding: 0;
   margin: 0;
   background-color: #efefef;
}
#container {
   padding: 0;
   margin: 0;
   height: 300px;
   width: 580px;
   background-color: white;
   display: block;
   overflow: hidden;
   position: relative;
}

video {
   padding: 0;
   margin: 0;
   width: 600px;
   position: absolute;
   top: -40px;
   left: -10px;
}

Answer 1

来源：html5 video on mobile

如果您在iOS或Android应用中嵌入带有视频的HTML5网页，事情就会变得复杂一些。

iOS UIWebView 要支持在线播放HTML5视频，这是其他地方的默认设置，您需要设置allowsInlineMediaPlayback属性，并在视频代码中包含webkit-playsinline属性，否则视频将在默认媒体播放器中播放。

您还需要将mediaPlaybackRequiresUserAction设置为NO才能支持自动播放。

Android WebView Android WebView需要一些显式设置才能支持HTML5视频。您需要启用硬件加速（将android:hardwareAccelerated="true"添加到AndroidManifest.xml文件）并在WebView上设置 WebChromeClient 。

在为移动设备实施HTML5视频时，肯定会考虑很多事情，但浏览器支持的稳定改进使您可以更轻松地为用户提供无缝的浏览器内视频播放。

希望这对你有所帮助。

上传并嵌入视频在桌面浏览器中播放但不在移动浏览器中播放

1 个答案: