HTML5의 <video> 요소는 웹 페이지에서 동영상을 재생하는 데 사용됩니다. 아래는 간단한 <video> 요소를 이용한 몇 가지 예시입니다.

기본적인 사용:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Example</title>
</head>
<body>
    <video width="640" height="360" controls>
        <source src="example.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>

여러 형식 지원:

html
<video width="640" height="360" controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

자동 재생과 루프:

html
<video width="640" height="360" controls autoplay loop>
    <source src="example.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

포스터 이미지 추가:

html
<video width="640" height="360" controls poster="poster.jpg">
    <source src="example.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

자막 추가:

html
<video width="640" height="360" controls>
    <source src="example.mp4" type="video/mp4">
    <track label="Korean" kind="subtitles" srclang="ko" src="subtitles_ko.vtt" default>
    <track label="English" kind="subtitles" srclang="en" src="subtitles_en.vtt">
    Your browser does not support the video tag.
</video>

이벤트 처리 추가:

html
<video width="640" height="360" controls id="myVideo">
    <source src="example.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<script>
    var video = document.getElementById("myVideo");

    video.onplay = function() {
        console.log("Video is playing");
    };

    video.onended = function() {
        console.log("Video has ended");
    };
</script>

이러한 예시들은 <video> 요소의 다양한 속성과 기능을 보여주고 있습니다. 실제 프로젝트에서는 동영상 파일 경로, 자막 파일 경로 등을 실제로 사용하는 값으로 대체해야 합니다.