Cara memasukkan film atau video ke dalam dokumen HTML

Anda dapat menanamkan film ke dalam dokumen HTML menggunakan contoh di bawah ini. Untuk kompatibilitas, kami sarankan Anda menggunakan format video MP4, yang didukung oleh semua browser utama dan sistem operasi.

Tip: Hosting film di server Anda bisa jadi mahal karena biaya bandwidth. Jika Anda tidak ingin khawatir tentang meng-hosting file video dan ingin mendapatkan perhatian audiens yang besar, hosting video di YouTube dan menanamkan tautan di situs Anda adalah ide bagus.

Catatan: Tidak semua saran di bawah ini akan berfungsi untuk semua browser. Pastikan solusi yang Anda putuskan untuk digunakan berfungsi dengan browser yang ingin Anda dukung.

Contoh di bawah ini memberikan metode berbeda untuk membuat file video dapat dilihat dari jendela browser. Kami juga menyarankan Anda membuat tautan unduhan langsung ke file, yang memungkinkan pengunjung untuk mengunduh file jika film tidak akan diputar di browser. Di bawah ini adalah dua contoh tautan langsung untuk dua file video dalam dokumen ini.

Robot penggerak floppy

Kode HTML

 Robot penggerak floppy 

Komersial Linux IBM

Kode HTML

 Komersial Linux IBM 

Sematkan video YouTube

Hosting video di YouTube sangat bagus karena menghemat biaya bandwidth, dapat mendukung banyak pemirsa, dan juga dapat memperkenalkan video Anda kepada pengunjung halaman paling populer di Internet. Di bawah ini adalah contoh video yang dihosting di YouTube dan disematkan di situs ini.

Kode HTML

Kode HTML untuk semua video YouTube ditemukan melalui tautan berbagi yang ditemukan di setiap video YouTube. Setelah mengklik tautan Bagikan, klik tautan Sematkan . Di bawah ini adalah contoh kode yang digunakan untuk menampilkan video YouTube di atas.

Tag video

Tag adalah tag HTML yang dirancang untuk menampilkan video di semua browser modern. Tag ini mendukung format video MP4, Ogg, dan WebM dan dapat diimplementasikan dengan satu tag HTML.

Kode HTML

 Browser Anda tidak mendukung 

Tag embed dasar

Di bawah ini adalah kode untuk metode paling mendasar dalam menyematkan file ke halaman web.

Contoh kode HTML

Dalam contoh ini, Anda menggunakan elemen sematan untuk menunjuk ke sumber file film yang ingin Anda mainkan. Perlu diingat, ini adalah contoh yang sangat mendasar dan tidak akan menampilkan peringatan atau mengarahkan pengguna ke lokasi untuk mengunduh plug-in jika file video tidak didukung.

Tambahkan file film menggunakan tag img

Jika Anda tidak ingin menggunakan tag, Anda juga dapat memasukkan file film menggunakan tag, seperti yang ditunjukkan pada contoh di bawah ini.

Contoh kode HTML

Sematkan tag untuk memutar film QuickTime (.MOV)

File film Apple QuickTime adalah jenis film populer lainnya di Internet. Di bawah ini adalah contoh dasar bagaimana memasukkan file-file ini ke halaman web Anda.

Catatan: QuickTime tidak lagi didukung di Microsoft Windows dan semua browser baru tidak lagi mendukung metode penyematan film QuickTime ini.

Contoh kode HTML

Dalam contoh embed di atas, bagian pertama dari kode menunjuk ke src (sumber) dari file film, yang merupakan file film itu sendiri. Selanjutnya, halaman plugins adalah lokasi plug-in jika pengunjung tidak menginstalnya. Lebar dan tinggi adalah dimensi sebenarnya dari file video. Nilai Controller dapat disetel ke true atau false untuk mengaktifkan tampilan kontrol bawah.

Tip: Anda mungkin ingin menambah tinggi file video jika Anda tidak dapat melihat pengontrolnya.

Loop adalah pengaturan kapan Anda ingin file memulai kembali secara otomatis setelah selesai. Akhirnya, putar otomatis memberi tahu browser untuk memulai atau tidak mulai memutar file video setelah halaman selesai memuat.

Ketik atribut untuk tag embed untuk menentukan plug-in

Dalam tag embed, sertakan atribut type untuk menentukan tipe MIME untuk file video. Dengan melakukannya, Anda dapat menentukan plug-in yang diperlukan untuk memutar video di browser.

Contoh kode HTML

Dalam contoh di atas, atribut type diatur ke video / x-msvideo, yang merupakan tipe MIME untuk file video AVI.

Untuk menentukan nilai untuk menetapkan atribut tipe untuk tipe file video lainnya, periksa daftar tipe MIME untuk file video pada halaman IANA Media Type.