웹 퍼블리싱/퍼블리셔 기능 구현
(Canvas) canvas로 동영상 재생시키기
꼬지비
2020. 1. 19. 18:09
|
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
81
82
83
84
85
86
|
<div>
<video id="video" src="https://www.bigbuckbunny.org/" width="0" height="0" controls="" playsinline="" loop=""></video>
<canvas id="myCanvas" width="document.body.getBoundingClientRect().width;" height="document.body.getBoundingClientRect().height;"></canvas>
</div>
<script>
var v = document.getElementById("video");
var c = document.getElementById("myCanvas");
v.play();
if (c.getContext) {
c.width = document.body.scrollWidth;
c.height = $(window).height();
var ctx = c.getContext("2d");
var i;
v.addEventListener(
"play",
function() {
a = window.setInterval(function() {}, false);
i = window.setInterval(function() {
ctx.drawImage(v, 0, 0, c.width, c.height);
}, 30);
},
false
);
v.addEventListener(
"pause",
function() {
window.clearInterval(i);
},
false
);
v.addEventListener(
"ended",
function() {
clearInterval(i);
},
false
);
} else {
alert("Canvas 미지원");
}
setTimeout(function() {
$(".beurator").css("display", "block");
}, 300);
$(window).resize(function() {
if (c.getContext) {
c.width = document.body.scrollWidth;
c.height = $(window).height();
var ctx = c.getContext("2d");
var i;
v.addEventListener(
"play",
function() {
a = window.setInterval(function() {}, false);
i = window.setInterval(function() {
ctx.drawImage(v, 0, 0, c.width, c.height);
}, 20);
},
false
);
v.addEventListener(
"pause",
function() {
window.clearInterval(i);
},
false
);
v.addEventListener(
"ended",
function() {
clearInterval(i);
},
false
);
} else {
alert("Canvas 미지원");
}
});
</script>
|
playsinline을 쓰면 아이폰, 안드로이드에서 자동재생을 할 수 있다.
브라우저 화면을 꽉 메우는 반응형 동영상이 재생된다.