Pada artikel kali ini masih tentang video html5, yaitu cara membuat video/DOM menggunakan html5.
HTML5 Video juga mempunyai method, property dan event. Ada beberapa metode untuk bermain, berhenti, dan loading, misalnya. Ada sifat (misalnya durasi, volume, mencari) yang dapat membaca atau ditetapkan. Ada juga peristiwa DOM yang dapat memberitahu Anda, misalnya, ketika elemen <video> mulai bermain, pause, berakhir, dll. Oh ya, DOM adalah DOcument Object Model. DOM adalah antar muka standar yang tidak tergantung platform.
Contoh di bawah ini menggambarkan, dengan cara yang sederhana, bagaimana mengatasi elemen <video>, membaca dan mengatur properti, dan metode panggilan.
Berikut ini tampilan script yang harus di buat :
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
87
88
89
90
91
92
93
| <!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 /><video id="video1" width="420"><source src="mov_bbb.mp4" type="video/mp4" /><source src="mov_bbb.ogg" type="video/ogg" />Your browser does not support HTML5 video.</video></div> <script type="text/javascript">var myVideo=document.getElementById("video1"); function playPause(){if (myVideo.paused)myVideo.play();elsemyVideo.pause();} function makeBig(){myVideo.width=560;} function makeSmall(){myVideo.width=320;} function makeNormal(){myVideo.width=420;}</script> <p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p></body></html> |
Dan tampilan pada web browser akan muncul tombol Mulai/Pause, Perbesar, Perkecil dan Normal untuk mengatur video yang kita buat dengan HTML5 tersebut.
0 comments:
Post a Comment