Cordova 앱에서 WebView 설정을 적용하려면 Cordova 플러그인과 설정 파일을 수정해야 합니다. Cordova는 내부적으로 Android의 WebView를 사용하므로, 앞서 설명한 설정을 다음 방법을 통해 적용할 수 있습니다.
1. Cordova 프로젝트 설정
1) config.xml 수정
Cordova의 설정 파일인 config.xml에 아래 설정을 추가합니다.
<platform name="android">
<!-- JavaScript 및 미디어 설정 -->
<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="LoadUrlTimeoutValue" value="700000" />
</platform>
• AllowInlineMediaPlayback: 비디오를 인라인으로 재생할 수 있게 합니다.
• MediaPlaybackRequiresUserAction: 사용자 제스처 없이도 비디오를 자동 재생하고 currentTime을 제어할 수 있게 합니다.
2) Cordova 플러그인 추가
비디오 재생 및 WebView 제어를 위해 필요한 플러그인을 설치합니다.
1. Cordova Whitelist 플러그인 (보안 설정):
cordova plugin add cordova-plugin-whitelist
2. Cordova Media 플러그인 (미디어 제어):
cordova plugin add cordova-plugin-media
3. Cordova InAppBrowser (테스트용, 필요 시):
cordova plugin add cordova-plugin-inappbrowser
2. HTML 및 JavaScript 적용
Cordova 앱에서 HTML과 JavaScript를 사용해 비디오를 제어합니다.
HTML 코드
index.html 파일에 비디오 컨트롤러를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cordova Video Seek</title>
</head>
<body>
<h1>Video Seek Example</h1>
<video id="videoPlayer" width="640" height="360" controls autoplay>
<source src="your-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="margin-top: 20px;">
<button onclick="seekBackward()">⏪ 10s Back</button>
<button onclick="seekForward()">⏩ 10s Forward</button>
<input type="number" id="seekTime" placeholder="Enter seconds" style="width: 100px;">
<button onclick="seekToTime()">Seek</button>
</div>
<script>
// Video element reference
const videoPlayer = document.getElementById('videoPlayer');
// Seek backward by 10 seconds
function seekBackward() {
videoPlayer.currentTime = Math.max(0, videoPlayer.currentTime - 10);
}
// Seek forward by 10 seconds
function seekForward() {
videoPlayer.currentTime = Math.min(videoPlayer.duration, videoPlayer.currentTime + 10);
}
// Seek to a specific time
function seekToTime() {
const seekTimeInput = document.getElementById('seekTime');
const seekTime = parseFloat(seekTimeInput.value);
if (!isNaN(seekTime) && seekTime >= 0 && seekTime <= videoPlayer.duration) {
videoPlayer.currentTime = seekTime;
} else {
alert('Please enter a valid time within the video duration.');
}
}
</script>
</body>
</html>
3. WebView 동작 확인
Android 플랫폼 빌드 및 실행
Cordova 프로젝트를 빌드하고 안드로이드 장치에서 실행하세요.
# 플랫폼 추가
cordova platform add android
# 빌드
cordova build android
# 실행 (에뮬레이터 또는 장치)
cordova run android
4. 추가 고려사항
1. Android 버전 확인
Android 4.4 (API 19) 이상의 WebView에서 HTML5 Video와 currentTime 속성이 지원됩니다.
2. 미디어 파일 접근 권한
비디오 파일이 로컬에 있는 경우, file:// 프로토콜 접근이 허용되었는지 확인하세요.
config.xml에서 access 권한 추가:
<access origin="*" />
3. Whitelist 설정
비디오 리소스 URL에 접근할 수 있도록 Content-Security-Policy를 확인합니다.
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' media:;">
4. JavaScript Debugging
앱 실행 중에 문제가 있으면 Chrome DevTools를 사용해 WebView를 디버깅하세요:
chrome://inspect
결론
위의 설정을 적용하면 Cordova 앱의 WebView에서 HTML5 비디오의 currentTime 속성이 정상적으로 동작합니다. 특히, MediaPlaybackRequiresUserAction 설정이 중요하며, 이를 통해 비디오 재생 및 탐색이 원활히 동작하게 됩니다.
카테고리 없음
댓글