Downloaded 65 times
Uploaded byAmiroh S.Kom
10 html multimedia
Dokumen ini menjelaskan tentang penggunaan multimedia dalam web, termasuk cara menampilkan video dan audio menggunakan HTML5 serta berbagai format yang didukung. Juga dijelaskan mengenai pengintegrasian objek online, seperti video dan chat box, serta pentingnya mengompres media untuk menghemat bandwidth. Terdapat instruksi teknis dan contoh kode untuk berbagai elemen multimedia di halaman web.
More Related Content
10 html multimedia
- 1. AMIROH, S.Kom SMKN 3JOMBANG HTML MULTIMEDIA
- 2. MULTIMEDIA? Multimedia padasebuah web, diartikan sebagai sound, music, videos, movies, dan animations. Contoh: Pictures, music, sound, videos, records, films, animations, dan seterusnya. Ada banyak format multimedia yang didukung oleh browser, misalnya: Video : MPEG, WebM, AVI, mov dst. Audio : mp3, mp4, wav. Midi dst
- 3. MENAMPILKAN VIDEO Menampilkanvideo pada website dapat dilakukan dengan menggunakan Tag HTML5 <video> dengan penulisan sebagai berikut: Contoh: <video src="videos/Scary Movie.mkv" width="320" height="240" controls autoplay> </video>
- 4.
- 5. Format video Formatfile video yang bisa dijalankan oleh tag <video> adalah:
- 6. Menampilkan Audio MenampilkanAudio pada website dapat dilakukan dengan menggunakan Tag HTML5 <Audio> dengan penulisan sebagai berikut: Contoh: <audio src=" videos/02. One Direction - Story Of My Life-1.mp3 " controls autoplay loop> </audio>
- 7. Atribut <Audio> Controls: Displays the standard HTML5 controls for the audio on the web page. Autoplay : Makes the audio play automatically. Loop : Make the audio repeat (loop) automatically. Preload : is used in the audio element for buffering large files "none" does not buffer the file "auto" buffers the media file "metadata" buffers only the metadata for the file
- 8.
- 9. Element <Object> Digunakanuntuk menyisipkan object pada browser Object dapat berupa Java Applets, PDF reader, atau Flash Player. Contoh: <object width="500" height="300px" data="videos/the cute mero.swf"> </object>
- 10. Contoh object berupafile flash (.swf) <object width="500" height="300px" data="videos/the cute mero.swf"> </object>
- 11. Contoh object berupafile pdf (.pdf) <object width="500" height="300px" data="videos/modul.pdf"> </object>
- 12. Contoh object berupafile HTML (.html) <object width="500" height="700px" data="boxmodeltask.html"> </object>
- 13. Tag <Embed> Memilikifungsi yang sama dengan tag <Object> Digunakan untuk menyisipkan object pada browser Object dapat berupa Java Applets, PDF reader, atau Flash Player. Contoh: <embed width="400" height="50" src=“videos/ the cute mero.swf"> </embed>
- 14. Contoh object berupafile flash (.swf) <embed width="500" height="300px" src="videos/the cute mero.swf"> </embed>
- 15. Contoh object berupafile pdf (.pdf) <embed width="500" height="300px" src="videos/modul.pdf"> </embed>
- 16. Contoh object berupafile HTML (.html) <embed width="500" height="700px" src="boxmodeltask.html"> </embed>
- 17.
- 18. Menampilkan Video Youtube Jika anda memiliki video yang ingin ditampilkan di website, maka sebaiknya video tersebut diunggah terlebih dahulu ke youtube File video yang telah diunggah, akan mendapatkan script/code dari youtube Selanjutnya script tersebut yang akan digunakan untuk menampilkan video pada halaman website
- 19.
- 20.
- 21. 1. Tag <iFrame> Script ini dapat diperoleh pada bagian Share halaman youtube Copy dan Paste script tersebut pada halaman web anda
- 22. 2. Tag <Object> Carapenulisan: Copy URL video yang ada pada Address bar youtube Misalnya: https://www.youtube.com/watch?v=56Sx2I1SRfA Editlah URL di atas sehingga menjadi: https://www.youtube.com/v/56Sx2I1SRfA Untuk menampilkan di halaman web, tambahkan Tag <Object> sehingga menjadi: <object width="420" height="315" data="https://www.youtube.com/v/56Sx2I1SRfA"> </object>
- 23. 3. Tag <Embed> Untuk mendapatkan URL video dengan Tag <Embed>, dapat menggunakan cara yang sama dengan tag <Object> Cara penulisan: <embed width="420" height="315" src="https://www.youtube.com/v/56Sx2I1SRfA"> </embed>
- 24.
- 25.
- 26. Menambahkan Backsound Backsoundmerupakan Audio/musik yang diputar sebagai latar belakang sebuah website Untuk menambahkan backsound ke dalam halaman web, file audio/mp3 harus diunggah terlebih dahulu pada hosting/portal yang menyediakan tempat penyimpanan audio Misalnya: iradeo.com Selanjutnya anda akan mendapatkan script/kode yang akan ditempelkan pada halaman web anda.
- 27.
- 28.
- 29. Lanjutan.. Copy danPaste script audio yang telah didapat, pada bagian sidebar website yang diinginkan (menjadi Widget). Hasilnya …
- 30. Tips! Video/Audio yangakan diunggah sebaiknya dikompres terlebih dahulu, agar kapasitas file menjadi lebih kecil Hal ini untuk menghemat bandwidth anda, terutama untuk website yang memiliki kapasitas bandwidth terbatas (bukan unlimited) Anda dapat menggunakan software aplikasi Dietmp3 untuk mengompres audio dan freevideocompressor untuk mengompres video
- 31.
- 32.
- 33.
- 34.
- 35. Merupakan portalpenyedia pembuatan animasi objek berupa banner, text, button, menu dan jam interaktif berformat SWF, secara online File objek yang diperoleh dapat didownload atau ditampilkan secara langsung dari server flashvortex.com melalui script / kode objek yang bersangkutan Flashvortex.com
- 36.
- 37. Chat Box Digunakanuntuk melakukan interaksi / komunikasi secara online dengan pengunjung website Chatting box dapat diperoleh melalui portal penyedia fasilitas chatting, seperti Cbox.ws, Chatwee.com, purechat.com dst. Script chat akan diperoleh setelah anda mendaftar pada portal tersebut Selanjutnya Copy dan Paste script tersebut pada bagian halaman web yang diinginkan, misalnya pada Sidebar Chat box ini dapat juga ditempatkan pada halaman tersendiri sebagai buku tamu
- 39.
- 40. 3. Visitor Counter Digunakan untuk mengetahui jumlah pengunjung sebuah website Visitor counter dapat diperoleh melalui portal penyedia layanan hit counter, misalnya hitstat.com
- 41.
- 42. Hitstat.com Merupakan salahsatu portal penyedia Hit counter/ visitor counter secara online Script Counter dapat diperoleh setelah anda mendaftar pada portal tersebut Selanjutnya anda akan mendapatkan script counter yang siap untuk disisipkan pada halaman web anda
- 43.
- 44. Selanjutnya Copydan Paste script tersebut pada bagian halaman web yang diinginkan, misalnya pada Sidebar
- 45. 4. Page Rank Digunakan untuk menampilkan daftar peringkat sebuah website PrChecker.com merupakan portal yang menyediakan sebuah widget yang dapat menghitung popularitas sebuah website Selanjutnya dari popularitas tersebut akan diperoleh peringkat sebuah website terhadap website lain di seluruh dunia.
- 46.
- 47.
- 48. Selanjutnya Copydan Paste script tersebut pada bagian halaman web yang diinginkan, misalnya pada Sidebar
- 49. TUGAS MENYELESAIKAN PROJECTPROTOTYPE WEBSITE MEMENUHI SEMUA KETENTUAN BERIKUT: Struktur template boleh berubah, namun konten (menu) tetap sama Template terdiri atas minimal 3 kolom Gunakan logo (interaktif) yang sesuai dengan konsep website Semua hyperlink pada menu telah terisi dan terhubung dengan sempurna Konten/Artikel minimal 7 artikel (boleh diambil dari internet dan cantumkan sumbernya pada akhir artikel)
- 50. Halaman Download,meliputi Dokumentasi Digital (Dokumen, Gambar, Music dan Video) Tambahkan Layanan Interaktif pada sidebar/halaman web, seperti Buku Tamu, Hit Counter, Page Rank, Chat Online, FB Widget dst Tambahkan 1 menu khusus yang menuju pada Profile Developer (Pembuat Website) Gunakan soft color yang sesuai, sehingga konten terbaca dengan baik dan pengunjung merasa nyaman Tambahkan hal menarik lainnya yang membuat pengunjung tertarik untuk kembali mengunjungi web kalian
- 51.