이전 글/JavaScript

23. JavaScript. VIDEO 태그이용하기

usnooy_ 2018. 1. 21. 22:47




<video>태그는 동영상 콘텐츠를 포함하기 위해 사용된다.


여러 속성을 통하여 여러가지 기능을 구현할 수 있다.







속성 




autoplay = "autoplay" :


이 값이 설정되면, 재생 가능한 시점에서 자동으로 재생이 시작 된다.






controls="controls" :


이 속성이 선언되면 소리조절, 동영상탐색, 일시정지/재시작을 할 수 있는 컨트롤러를 제공한다.





height  :


비디오의 출력 영역 높이 / CSS 픽셀 단위




width :


비디오의 출력 영역 너비 / CSS 픽셀 단위




loop :


이 값이 설정되면 동영상이 재생을 마친 후 자동으로 처음으로 돌아간다.




muted :


설정하면 오디오가 나오지 않고, 기본 값은 false이다.




poster  :


사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소이다.



src :


삽입할 동영상의 주소이다.






예제 :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
* {
    box-sizing: border-box;
}
 
body {
    margin: 0;
    font-family: Arial;
    font-size: 17px;
}
 
#myVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
}
 
.content {
    position: fixed;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
}
 
#myBtn {
    width: 200px;
    font-size: 18px;
    padding: 10px;
    border: none;
    background: #000;
    color: #fff;
    cursor: pointer;
}
 
#myBtn:hover {
    background: #ddd;
    color : black;
    
}
</style>
</head>
<body>
    <video autoplay="autoplay" muted loop id="myVideo" controls="controls" >
        <source src="../images/rain.mp4" type="video/mp4">
        당신의 브라우저는 html5 video 제공하지 않습니다.
    </video>
    <div class="content">
        <h1>Heading</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Enim placeat aliquid cumque eius facere maxime.</p>
        <button id="myBtn" onclick="myFunction()">Pause</button>
    </div>
 
    <script type="text/javascript">
    var video = document.getElementById("myVideo");
    var btn = document.getElementById("myBtn");
    
        function myFunction() {
            if(video.paused){
                video.play();
                btn.innerHTML = "Pause";
            }else{
                video.pause();
                btn.innerHTML = "Play";
                
            }
        }
    </script>
</body>
</html>

cs



저작자표시 비영리 변경금지 (새창열림)