Wednesday, August 29, 2018

Membuat Video Sebagai Background Web









Pertama-tama kita buat foldernya terus ditaroin file html sama video yang ingin kita pake sebagai background kyk gambar dibawah :
Terus didalem mainfile.html kita tambain kode buat videobackgroundnya dl kek gini :
Klu udah nambain kyk kode diatas, trs kita buka mainfile.html, hasilnya seperti ini :

Jadi videonya udah running dibackground... yeeaaah..... Berikutnya kita tambain sesuatu diatas videonya kyk gini ajjah yg simpel...


 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
<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1">
        <style>
            #myvideobackground {
                position: fixed;
                right: 0;
                left: 0;
                bottom: 0;
                min-width: 100%;
                min-height: 100%;
            }
            .myContent {
                position: fixed;
                bottom: 0;
                padding: 20px;
                margin: 20px;
                background: #91f3b6;
                opacity: 0.80;
            }
            .myContent h2 {
                color: purple;
                font-size: 34px;
            }
            .myContent p {
                font-family: 'Times New Roman', Times, serif;
                font-style: oblique;
            }
            .myContent .div2 {
                width: 100%;
                text-align: center;
            }
            #videoBtn {
                background-color: cornflowerblue;
                width: 80px;
                transition: 1s;
            }
            #videoBtn:hover {
                background-color: rgb(0, 255, 98);
            }
        </style>
    </head>
    <body>
        <video autoplay muted loop id="myvideobackground">
            <source src="Pemandangan 1.mp4" type="video/mp4">
                Your browser does not support HTML5 video...
        </video>
        <div class="myContent">
            <h2> Ini adalah contoh video background </h2>
            <p> Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro</p>
            <div class="div2"><button id="videoBtn" onclick="playPause">Pause</button></div>
        </div>
    </body>
</html>

Hasilnya :

Terus berikutnya kita nambain handler buat button yg paling bawah buat ngepause dan ngeplay kembali videonya... So tambahkan script kyk gini :


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
        <script>
            var video = document.getElementById("myvideobackground");
            var vidBtn = document.getElementById("videoBtn");
            // vidBtn.addEventListener("click", playPause);
            function playPause () {
                console.log('here here here')
                if (video.paused) {
                    video.play();
                    vidBtn.innerHTML = "Pause";
                } else {
                    video.pause();
                    vidBtn.innerHTML = "Play";
                }
            }
        </script>

Naaah... dengan script itu kita bisa ngplay dan/atau ngepause videonya.... :D

Siipss... sekians dan terima kasih... semoga bermanfaaat... :-)

Source code lengkapnya : 


 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
<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1">
        <style>
            #myvideobackground {
                position: fixed;
                right: 0;
                left: 0;
                bottom: 0;
                min-width: 100%;
                min-height: 100%;
            }
            .myContent {
                position: fixed;
                bottom: 0;
                padding: 20px;
                margin: 20px;
                background: #91f3b6;
                opacity: 0.80;
            }
            .myContent h2 {
                color: purple;
                font-size: 34px;
            }
            .myContent p {
                font-family: 'Times New Roman', Times, serif;
                font-style: oblique;
            }
            .myContent .div2 {
                width: 100%;
                text-align: center;
            }
            #videoBtn {
                background-color: cornflowerblue;
                width: 80px;
                transition: 1s;
            }
            #videoBtn:hover {
                background-color: rgb(0, 255, 98);
            }
        </style>
    </head>
    <body>
        <video autoplay muted loop id="myvideobackground">
            <source src="Pemandangan 1.mp4" type="video/mp4">
                Your browser does not support HTML5 video...
        </video>
        <div class="myContent">
            <h2> Ini adalah contoh video background </h2>
            <p> Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei. Id qui nemore latine molestiae, ad mutat oblique delicatissimi pro</p>
            <div class="div2"><button id="videoBtn" onclick="playPause()">Pause</button></div>
        </div>
        <script>
            var video = document.getElementById("myvideobackground");
            var vidBtn = document.getElementById("videoBtn");
            // vidBtn.addEventListener("click", playPause);
            function playPause () {
                console.log('here here here')
                if (video.paused) {
                    video.play();
                    vidBtn.innerHTML = "Pause";
                } else {
                    video.pause();
                    vidBtn.innerHTML = "Play";
                }
            }
        </script>
    </body>
</html>
Diposkan oleh di
Label: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)