Belajar HTML (19): Menyematkan File Multimedia pada Halaman Web

Saya tidak perlu tampilkan hasilnya ya, silakan dijalankan dan lihat sendiri.

Ada pertanyaan, bagaimana kalau audionya diputar otomatis dan diputar ulang jika durasinya sudah habis tetapi tanpa menampilkan player?

Caranya mudah. Masukkan atribut loop dan autoplay saja tanpa atribut controls, selesai 😎

Video

Bagaimana memasukkan video ke dalam halaman web? Sebenarnya sama saja dengan audio, bedanya hanya di tag saja yaitu menggunakan <video> ditambah dengan atribut height dan width untuk mengatur ukuran tampilan videonya. Adapun atribut lainnya sama saja termasuk fungsinya seperti controls, loop dan autoplay.

Perbedaan spesifik hanya pada player, untuk file video ada seekbarnya yang dapat digeser dan juga tombol fullscreen.

Kita coba? Oke, Langkah paling cepat dengan save-as file sebelumnya kemudian simpan dengan nama file 46-html-video.html. Ubah dan sesuaikan isi kodenya menjadi seperti ini, contohnya lengkap semua untuk atributnya:

<!DOCTYPE html>
<html>
<head>
   <title>Video</title>
</head>
<body>
   <h2>Memutar file video</h2>
   <video controls loop autoplay width="480" height="340">
      <source src="rabbahu_bidzikrika.mp4">
      Browser Anda tidak mendukung video.
   </video>
</body>
</html>

Pastikan juga file videonya sudah ada ya… πŸ˜‰

Setelah dijalankan hasilnya seperti gambar berikut, saya tidak coba lagi untuk browser lain ya, cukup 1 saja πŸ˜†

Video Player Web

Untuk tutorial bagaimana menyematkan file multimedia lainnya silakan explore sendiri saja ya πŸ˜‰ Kita ketemu lagi dipembahasan lain…

← Sebelumnya

Halaman : 1 2 3

11 Responses

  1. Kamelia berkata:

    Terimakasih telah membuat artikel ini dengan artikel ini saya bisa belajar tentang html multimedia dengan mudah terutama sangat mudah sekali dipahami dengan adanya artikel ini.perkenalkan nama saya kamelia

  2. Mozza Muthia Rahman berkata:

    Terima kasih untuk artikel nya bang, artikel nya sangat bermanfaat dan berkat artikel abang ini saya lebih memahami tentang html multimedia..
    Semangat terus bikin artikel nya ya bang, sukses selalu..
    Perkenalkan bang nama saya Mozza Muthia Rahman dari kampus atma luhur

  3. gusti dinda berkata:

    Terimakasih kak atas ilmunya sangat bermanfaat dalam mengerjakan tugas saya, sukses terus dalam berkarya, tetap semangat dalam membagi ilmunya kak, perkenal kan nim saya 1922500129, nama saya gusti dinda permata dari kelompok SI2J

  4. JEFFRY H SUFRYANTO SIMARMATA berkata:

    Studi Kasus Aplikasi Desktop terhubung ke Database

    1. Asfarezhan. (Studi kasus : Aplikasi Pengolahan Data Guru dan Karyawan pada SMP ST Santa Theresia Pangkalpinang )
    2. Amirah . (Studi kasus : Badan Keuangan Daerah)
    3. Ardila. (Studi kasus : Bank Mandiri)
    4. Rinal ( Studi kasus : Pinjaman keuangan Nasabah Koperasi Karunia pada PT TASPEN (Persero) Pangkalpinang.
    Berbasis dekstop

    5. Sintia ( studi kasus : analisa dan perancangan sistem administrasi informasi kepegawaian pada kantor kecamatan gabek pangkalpinang berbasis dekstop
    6.Sri agustina(studi kasus : Analisis dan perancangan sistem informasi akademik pada madrasah tsanawiyah negeri jebus berbasis dekstop)
    7. Noviasari ( analisa dan implementasi sistem informasi pengarsipan kontrak pada dinas pekerjaan umum kota pangkalpinang)
    8. Arvina Destiyani (studi kasus : Analisa dan perancangan sistem informasi penanganan klaim nasabah asuransi jiwa pada PT. Ala financial pangkalpinang
    9. Tri Utami ( pemanfaatan sistem informasi berbasis web dalam pelayanan surat dikantor kelurahan bukit sari pangkalpinang)
    10.Fenisa Indah Sari ( Rancang bangun sistem informasi akademik berbasis Web pada SDN 32 Sungaliat menggunakan model FAST)
    11. Adri firmansyah (Analisa dan perancangan sistem informasi pengelolaan surat pada dinas pendidikan kota pangkal pinang)
    12. Edo renaldi (analisa dan perancangan sistem informasi di unit donor darah pmi berbasis website dikota pangkal pinang)
    13. Gusti dinda (Analisis dan perancangan sistem informasi gerakan terpadu Pusat kesehatan hewan kabupaten Bangka berbasis website)
    14. Shofi Rachmawati ( Analisa Dan perancangan sistem informasi inventaris Dan persediaan barang berorientasi objek di Hotel Jati Wisata Pangkalpinang).
    15. Muhammad Jainuri (
    Analisis dan perancangan sistem informasi pengelolaan inventaris barang berbasis website pada kantor inspektorat provinsi kota Pangkalpinang)

    Lanjutkan

  5. Ardila Yunita berkata:

    Hallo kak. Terimakasih ya kak artikel nya bagus mudah dipahami bagi saya yang baru belajar tentang HTML. Artikel nya juga sangat membantu dalan memenuhi tugas kuliah saya kak. Semoga dapat memberikan artikel yang bermanfaat lainnya ya kak.Terimakasih kak sukses selalu . Perkenalkan Saya Ardila Yunita, NIM 1922500096

  6. Claudio berkata:

    Terimah kasih atas info di atas sedikit saran talong perbanyak materi diatas karena materi terlalu singkat nama claudio khelvin

  7. Indah lestari berkata:

    kereeennnnnnnn
    min seringg sering ya buat artikel seperti ini , ga tau kenapa kaloo baca”artikel yang admin buat jadi semangat belajarrrr .. padahal banyak artikel”lainnya tapi aku pilih artikel ini karnaa lengkap bgt ..
    semngat terus ya min buat artikel”lainnya .. terus berkarya πŸ‘
    perkenalkan namaku indah lestari.

  8. Gita lestari berkata:

    Terimakasih telah membuat artikel ini, artikelnya bagus, sangat membatu saya yang bru mempelajari dasar-dasar HTML. Sangat membatu saya untuk memperdalam ilmu-ilmu dalam mempelajari HTML, semoga kedepanya bisa lebih bgus lagi dan memperbanyak pmbelajarannya. Perkenalkan nama saya GITA LESTARI.

  9. wiranto berkata:

    Terima kasih kak website ini sangat bermanfaat untuk saya dengan penjelasannya. Saya merasa senang dapat ilmu tentang multimedia . Materi yang disampaikan oleh kakak sangat mudah dimengerti. trus webnya bagus,singkat jelas & mudah di pahami terus berkreasi kak .
    Saran saya tambahkan gambar dong kak biar website nya lebih menarik untuk di lihat..
    Salam kenal kak nama saya Wiranto( Si2K), kunjungi juga dong website kampus kami… SALAM SUKSES…

  10. famzi abel berkata:

    terimah kasih ini sangat bagus untuk di baca dan mudah di pahami semogah atmin nya sukses trus #nama famzi abel parlindungan #nim1922500207 #kelompok si2k #matkul DPW

  11. Jeffry H Sufryanto Simarmata berkata:

    elamat malam kak. Terima kasih kak artikel pembelajarannya kak. Dengan Artikel pembelajaran kakak, Saya Yang sebagai pemula bisa mengerti sedikit walaupun belum semua ya. Bisa menambah ilmu saya di kampus. tetap Berkarya terus kak πŸ’ͺπŸ’ͺ. Perkenalkan saya
    Jeffry h SUFRYANTO SIMARMATA
    NIM 1922500047
    KELOMPOK S12J
    Terima kasih kakπŸ™πŸ™

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *