html5 video 로딩시 "동영상 로딩중.." 메시지 출력방법 문의

[xfreeman]

앱스프레소를 이용해서 앱을 만들었습니다.

앱스프레소가 다른 웹앱 프레임워크보다 좋은 기능이 많았고

특히 html5 video 를 지원해서 적용을 하였습니다.

적용을 해보니 html5 video 가 잘나오긴 하는데 처음에 비디오를 로딩하는 동안

"동영상 로딩중.." 이미지가 뜨지 않네요.. 시간이 길어지면 사람들이 안되는줄 알고

뒤로 돌아가는 경우가 많아 로딩중 메시지를 띄우고 싶은데 방법이 없을까요?

[iolo]

이론적으로는 video 태그의 poster 속성을 사용하시면 됩니다만...

현실적으론 단말 플랫폼과 운영체제 버전, 웹킷 버전등에 따라 조금씩 달라서요...

video태그와 같은 크기의 div(혹은 img 뭐든간에...)를 video보다 높은 z-index로 덮어놓는 방법을 쓰게 될 듯... 하네요.

간단한 예를 들어보면...

<style>

#poster, #video { position:absolute; top:50px; left:0; width:320px; height:240px; }

#video { z-index:1; }

#poster { z-index:2; }

</style>

<div id="poster">Loading Video...</div>

<video id="video">...</video>

<script>

document.getElementById('poster').style.display = 'block';//비디오를 포스터로 덮어서 가린다. video 태그의 display를 none하면 안됨!

document.getElementById('video').onplaying = function(e) {

  document.getElementById('poster').style.display = 'none';//재생 시작되면 포스터를 가린다.

}

</script>

참고할만한 링크들을 소개해드립니다.

http://html5doctor.com/the-video-element/

http://stackoverflow.com/questions/3239704/html5-video-poster-attribute-in-safari-and-chrome

http://www.chipwreck.de/blog/2010/03/01/html-5-video-dom-attributes-and-events/

[xfreeman]

답변 감사드립니다.

제가 질문을 제대로 하지 못한것 같네요. 조금더 상세히 말씁드리겠습니다.

일단 문서에서 <video> 테그를 이용하여 html5 비디오를 호출합니다.

그리고 동영상 플레이를 시작하면 일반 안드로이드 브라우저에서는

풀스크린으로 되면서 버퍼링 하는동안 화면가운데에 "동영상 로딩중.." 이 나오고

버퍼링이 끝나면 동영상 재생이 됩니다.

아이폰은 애뮬로 확인을 해보니 브라우저와 앱스프레스와 동일하게 플레이 되는걸 확인했습니다.

그런데 안드로이드 앱스프레소에서는 동영상 플레이가 되나 브라우저와는 약간 차이점이 있습니다.

일단 완벽한 풀스크린이 아닙니다.

동영상이 플레이 될때 상단바가 사라지지 않고 계속있습니다.

그리고 제일큰 차이점이 초기 버퍼링하는동안  "동영상 로딩중.." 메시지가 나오지 않는것입니다.

제가 느끼기에는 브라우저는 html5 video를 외부플레이어에서 플레이 하는것같고

앱스프레소에서는 html5 video를 플레이어를 앱스프레소 내부에 담아서 플레이 하는것 같습니다.

[blueNmad]

안녕하세요.

말씀하신대로 현재 버전에서는 비디오 태그의 재생중에

상단바가 사라지지 않고, '로딩 중...'과 같은 메시지가 나오지 않고 있습니다.

두 동작 모두 플러그인을 통해서 해결이 가능한 내용이며 (WebChromeClientListener 구현)

다음 버전에서 기본 동작으로 추가하는 것을 검토하도록 하겠습니다.