* 이 포스팅은 w3school : HTML Video와 webOS 개발자 사이트 : com.webos.media를 참고하여 작성되었습니다.
본격적인 media 불러오기에 앞서
이번 시간에는 media를 포함한 web app을 개발해봅니다.
이미 알고있듯, webOS는 web app 실행환경을 제공하는 web 기반 플랫폼입니다.
따라서 HTML5, CSS, JavaScript를 활용하는 일반적인 web app을 만드는 방식으로 webOS를 위한 web app 개발 또한 쉽게 가능합니다.
본 글에서는 media 중에서도 video를 포함한 web app을 생성하고 webOS에서 실행하였습니다.
- HTML5의 <video>태그를 사용하기
- HTML5의 <video>태그를 사용하여 패키징된 web app 폴더에 추가한 video 파일을 불러올 수 있습니다. (패키징 폴더 안에 없을 경우 경로 지정 필요)
- JavaScript로 play/pause, 동영상 size 조절 등의 기능을 추가할 수 있습니다.
- 원하는 기능에 대한 개발이 끝나면, web app을 package하고 install하여 webOS 상에서 확인 할 수 있습니다.
- Media API 사용하기
- 각 HTML5 video method는 webOS media 프레임워크 상에서 API를 가집니다.
- webOS 미디어 서버 혹은 com.webos.media 서비스는 media의 재생을 제어하는 high level method를 제공합니다. (e.g. load, play, seek)
- webOS 미디어 서버 혹은 com.webos.media 서비스는 media 재생을 위한 Hardware Decoder, Display 와 같은 중요한 system resource를 관리하는 방법을 제공합니다.
HTML 사용
HTML에서 제공하는 <video> 요소를 이용하여 비디오를 재생할 수 있습니다.
또한 버튼에 자바스크립트 문법을 적용하여 재생/일시정지(play/pause), 영상크기 조절 등의 기능을 구현할 수 있습니다.
HTML 전체 코드
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="720">
<source src="movie.mp4" type="video/mp4">
<source src="movie.mp4" type="video/ogg">
Your browser does not support HTML video.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 840;
}
function makeSmall() {
myVideo.width = 480;
}
function makeNormal() {
myVideo.width = 600;
}
</script>
</body>
</html>1. button
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>- button을 클릭하면 onclick 속성에 해당하는 함수를 실행하도록 자바스크립트 문법으로 구현했습니다.
2. video
<video id="video1" width="720">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>- <video> 요소 사용할 때, width나 height가 설정되지 않은 영상은 로드되는 동안 페이지가 깜빡거릴 수 있기 때문에 width나 height 속성을 표시해주는 것이 좋습니다.
- <video> 와 </video> 사이의 텍스트는 <video> 요소를 지원하지 않는 브라우저에서 표시됩니다.
- src 속성은 비디오 파일의 위치(URL)을 명시합니다.
- <source>는 파일 형태를 여러 개 만들어두어 (ex. ogg, mp4) 지원하는 브라우저가 선택하여 사용합니다. 모두 사용 가능한 경우 첫번째 source에 담긴 파일을 사용합니다.
3. document.getElementById()
var myVideo = document.getElementById("video1");- getElementById("video1") 는 괄호 안에 해당하는 id="video1" 요소에 접근하는 함수입니다. 요소에 접근하면 자바스크립트 문법을 사용하여 여러 기능을 구현할 수 있습니다. myVideo 변수를 통해 id가 "video1"인 요소에 접근하여 onclick속성에서 사용되는 함수를 구현하도록 합니다.
4. function
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}properties
- paused : 비디오가 정지된 상태입니다.
- play : 비디오가 재생되는 상태입니다.
methods
- play() : 비디오를 재생시킵니다.
- pause() : 비디오를 정지시킵니다.
playPause() 함수 : if조건문을 이용하여 비디오가 정지상태( myVideo.paused )일 때는 비디오가 재생이 되는 상태( myVideo.play )로 만들고 반대의 경우에는 비디오를 정지상태로 만듭니다.
더 많은 property 와 method에 대해 알고싶다면 HTML Audio/Video DOM Reference 사이트에 방문하시면 됩니다.
function makeBig() {
myVideo.width = 840;
}
function makeSmall() {
myVideo.width = 480;
}
function makeNormal() {
myVideo.width = 600;
}width 는 영상의 넓이 정보를 담은 변수입니다.
이 값을 변화시켜 영상의 크기를 변화시킬 수 있습니다.
makeBig() 함수 : 영상의 크기를 넓이 840으로 만들어줍니다.
makeSmall() 함수 : 영상의 크기를 넓이 480으로 만들어줍니다.
makeNormal() 함수 : 영상의 크기를 넓이 600으로 만들어줍니다.
이렇게 해서, web app을 package, install을 마친 후 실행한 결과입니다.
com.webos.media 사용
1. webOS의 media API의 사용
- 예전 게시글에서 설명드린 내용인 webOS 홈페이지에서 제공하는 API를 이용하여 미디어를 재생할 수 있습니다. 그 중 media API의 다양한 method를 이용하여 미디어를 불러와 재생하고, 기능을 활용할 수 있습니다.
2. media API를 이용
API 이용하기 게시글을 참고하여 media API를 사용할 수 있습니다.
'webOS Article > 2. Luna Service 활용하기' 카테고리의 다른 글
| Bluetooth 사용하기 1 (0) | 2021.09.14 |
|---|---|
| TTS 활용하여 음성 출력하기 (0) | 2021.08.24 |
| Database 사용하기 (DB8) (0) | 2021.08.14 |
| Luna Service API 호출하기(by Enact App) (0) | 2021.07.24 |
| Luna Service API 이용하기 (0) | 2021.07.24 |