2016-09-05 4 views
0

현재 iPad 및 Android 용 HTML 키오스크 프리젠 테이션을 개발 중입니다. 내가 iPad에서 완벽하게 작동하는 Android의 팝업 동영상과 Android의 Chrome에서도 문제가 발생합니다. 나는 이것을 키오스크 스타일 어플리케이션으로 제시 할 필요가있다. 그래서 안드로이드 Webview (Chromium) 엔진을 사용한다고 믿는 Android의 iPad에서 Protosee와 Fully Kiosk Browser를 사용하므로 너무 잘 작동하지만 그렇지 않다.Android 용 자동 재생 동영상

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

** 앱 **을 만드는 이유는 무엇입니까? ** 웹 페이지 **입니다. 그냥 그것의 모바일 버전을 확인하십시오. 실제로 웹 페이지로 연결되거나 웹 페이지를 흉내내는 앱을 만들 필요가 없습니다. –

+0

단지 모든 콘텐츠/비디오가 Android 기기에 로컬로 저장된다는 것을 추가하십시오. –

+0

... 좋은 생각이 아니야. Whit ** 좋아하는 동영상으로 사용자의 기기를 ** 스팸 **하고 싶습니까? –

답변

0

을 다음과 같이

코드입니다. 보안상의 이유로 안드로이드가 그렇게한다고 생각합니다. 그래서 사용자가 원하지 않으면 앱은 너무 많은 모바일 데이터를 사용하지 않습니다. 어쩌면 비디오를 로컬에 저장하여 시도해 볼 수 있습니까?

1

Android 및 iOS에서 동영상 자동 재생을 사용 중지했습니다! 백그라운드에서 재생할 수있는 모든 동영상 광고가 휴대 전화로 웹을 검색한다고 상상해보십시오. 단순히 모든 대역폭을 먹어 치울 것입니다.

하이브리드 HTML 클라이언트로 작업 할 때 비디오 자동 재생을 시작하기 위해이 트릭/해결 방법을 사용했습니다. 사용자가 처음 페이지를 입력하면 <video> 요소가 비어있는 src를 페이지 (어딘지 숨김)로 만들어야합니다. 어떤 이유로 든 사용자가 처음으로 화면을 터치 할 때마다 video 요소에서 play 메서드를 호출하려고했습니다 (이 경우 html 비디오 요소의 첫 번째 usergesture가 중단됩니다). 이것은 대개 콘솔에서 약간의 오류/경고를 줄 것입니다.하지만 중요한 것은 첫 번째 사용자 제스처가 만들어져 원하는 언제든지 play() 메서드를 사용할 수 있기 때문입니다. 따라서 첫 번째 사용자 제스처가 작성된 후 동일한 <video> 요소 만 사용하면됩니다.

이 정보가 도움이되기를 바랍니다.

관련 문제