Question

我目前正在开发适用于iPad和Android的HTML信息亭演示文稿。我遇到的问题是Android上的弹出视频，它可以在iPad上以及Android上的Chrome中完美运行。我需要将其作为自助服务终端风格的应用程序呈现，因此我在iPad上使用Protosee，在Android上使用完全自助服务终端浏览器，我相信它使用Android Webview（Chromium）引擎，所以应该也可以使用但是没有。

使用FKB，视频弹出窗口会出现，但中间有一个空白屏幕和一个视频图标，再次触摸屏幕会删除弹出窗口并在后台播放视频。

任何指针都会非常感激。

代码如下

<html>
<head>
<title>BASE Charging Stand</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="logitech.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="js/logitech.js"></script>
</head>
<body>
<div class="main_content basechargingstand">
<div class="header">
<div class="hotspot" onclick="goBack()"></div>
<a href="index.html"><div class="hotspot"></div></a>
<a href="all_products.html"><div class="hotspot"></div></a>
</div>
<div class="page_navigation">
<div class="top_slot" onclick="goBack()"></div>
</div>
<div class="product_detail">
<div id="video_pop" onclick="onPopClick()"></div>
<a onclick="onVideoClick('videos/Base.mp4');">
<img src="images/play_btn_lrg.png" width="78"/>
</a>
<a href="base_charging_stand_detail.html"><div class="hotspot 3col"></div></a>
</div>
</div>
</body>
</html>

</script>
function onVideoClick(theLink) {
document.getElementById("video_pop").innerHTML = "<video poster autoplay id=\"the_Video\"><source src=\""+theLink+"\" type=\"video/mp4\" ></video>";
document.getElementById("video_pop").style.display="block";
document.getElementById('video_pop').play(); 
} 

function onPopClick() {
document.getElementById("video_pop").style.display="none";
document.getElementById("video_pop").innerHTML = ""; 
}         
</script>


<style>
#video_pop {
    z-index: 9999;
    position: absolute;
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background: rgb(193, 198, 201) !important; 
    display: none;
    cursor: pointer;
    top: 20.7%;
}

#the_Video {
    width: 100%;

    position: fixed;
    top: 60.5%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

}
</style>

Answer 1

Android和iOS已禁用视频自动播放功能！想象一下，用你的手机浏览网页，所有可能在后台播放的视频广告只会占用你所有的带宽。

在使用混合HTML客户端时，我使用此技巧/解决方法开始自动播放视频：当用户第一次进入页面时，必须在页面中创建具有空src的<video>元素（隐藏在某处））。每当用户因任何原因第一次触摸屏幕时，我就会尝试在视频元素上调用play方法（这打破了html视频元素上的第一个usergesture）。这通常会在控制台中发出一个小错误/警告，但这没关系，因为重要的是第一个用户手势已经完成，因此您可以随时使用play（）方法！因此，在完成第一个用户手势后，您只需使用相同的<video>元素！

我希望这会有所帮助。

Answer 2

我认为您无法在Android中的WebView中自动播放视频。我相信Android出于安全原因这样做，因此除非用户需要，否则应用不会使用过多的移动数据。也许你可以通过在本地存储视频来尝试它？

Android上的自动播放视频

2 个答案: