HTML DOM의 Video canPlayType() 메서드는 브라우저가 특정 동영상 형식을 재생할 수 있는지 여부를 나타내는 문자열을 반환합니다. 웹 개발 시 다양한 브라우저 환경에서 동영상이 정상적으로 재생되는지 사전에 확인해야 할 때 매우 유용하게 사용됩니다.
문법(Syntax)
canPlayType() 메서드의 기본 문법은 다음과 같습니다.
videoObject.canPlayType(typeAsParameter)
매개변수로 전달된 동영상 타입에 따라 아래 표와 같은 문자열 값이 반환됩니다.
| 반환값 | 설명 |
|---|---|
| probably | 브라우저가 해당 동영상 형식을 대체로 지원할 가능성이 높음을 의미합니다. |
| maybe | 브라우저가 해당 동영상 형식을 지원할 수도 있음을 의미하며, 실제 재생을 시도해봐야 확실하게 알 수 있습니다. |
| "" (빈 문자열) | 브라우저가 해당 동영상 형식을 확실히 지원하지 않음을 의미합니다. |
예제(Example)
다음은 Video canPlayType() 메서드를 활용하여 브라우저의 mp4 형식 지원 여부를 확인하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video canPlayType()</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-canPlayType( )</legend>
<video id="demo" width="320" controls><source src="" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Does Browser Supports video/mp4?">
<div id="divDisplay">
</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var demo = document.getElementById("demo");
var srcOfMedia = 'https://www.tutorialspoint.com/html5/foo.mp4';
function getTrackDetails() {
var ans = demo.canPlayType('video/mp4');
if(ans !== ''){
divDisplay.textContent = 'Browser supports mp4';
demo.src = srcOfMedia;
demo.load();
}
else
divDisplay.textContent = 'Browser does not supports mp4';
}
</script>
</body>
</html>실행 결과(Output)
'Does Browser Supports video/mp4?' 버튼을 클릭하기 전 화면입니다.
'Does Browser Supports video/mp4?' 버튼을 클릭한 후 화면입니다. 버튼을 클릭하면 canPlayType('video/mp4')의 반환값을 검사하여, 빈 문자열이 아니면 동영상 소스를 로드하고 지원 메시지를 표시하며, 빈 문자열이면 미지원 메시지를 출력합니다.
