Mengenal Video H5P: Bagaimanakah Cara Kerja Video H5P?

Bagaimana cara kerja elemen video H5P?

Elemen video H5P memberitahu browser untuk memuat file video dari sumber lain dengan menentukan lokasi file video, mirip dengan cara browser memuat file gambar (gambar itu sendiri tidak disimpan dalam file HTML — browser menariknya dari suatu tempat kalau tidak). Lebar, tinggi, dan atribut lainnya juga dapat disertakan untuk memberi tahu browser cara menampilkan video. Kode markup lain dapat memberi tahu browser di mana menempatkannya pada halaman.

Baca juga tentang: Video Animasi Pembelajaran Bupin ID: Manfaat Menggunakan Video Animasi dalam Pembelajaran

Tag video HTML5 adalah < video >, dan tag tersebut ditutup, mirip dengan elemen HTML lainnya, dengan < /video >.

Di antara tag tersebut, tag < source > menunjukkan lokasi file video. Di dalam tag ini, sumber video (src) dan jenis file (type) ditunjukkan seperti ini:

< video >

  < source src=”example.mp4″ type=”video/mp4″ >

< /video >

Baca juga tentang: Cara Video Interaktif Pembelajaran Mengubah Pendidikan

Atribut Penting H5P

Atribut penting berikut juga dapat dimasukkan ke dalam tag < video >:

• Width: Ini menentukan lebar video dalam piksel. Jumlah piksel di antara tanda kutip: lebar = “370”
• Height: Ini menentukan tinggi video. Cara kerjanya mirip dengan atribut lebar.
• Play, pause, volume: Kontrol ini memungkinkan pengguna mengontrol pemutaran video. Tambahkan kontrol ke tag < video > untuk menyertakannya.

Sumber alternatif untuk video juga dapat ditempatkan di antara tag “<video>” jika browser tidak mendukung format file pertama. Browser selalu menggunakan sumber pertama yang terdaftar.

Selain itu, teks dapat ditempatkan di antara tag < video >; teks ini hanya ditampilkan jika browser pengguna tidak mendukung video HTML5.

Baca juga tentang: Cara Membuat Video Pembelajaran Interaktif Secara Gratis

Jika digabungkan, kode HTML5 untuk video tersemat mungkin terlihat seperti ini:

< video controls width=”370″ height=”130″ >

  < source src=”example.mp4″ type=”video/mp4″ >

  < source src=”alternate-example.webm” type=”video/webm” >

Your browser does not support HTML5 video.

< /video >

Baca juga tentang: Pengembangan Media Pembelajaran Interaktif: Mengenal Perbedaan antara Gamification dan Game-based Learning

Sejumlah atribut lainnya, seperti autoplay (untuk memutar video segera setelah halaman dimuat), loop (untuk memutar video), muted (untuk menonaktifkan video), dan poster (untuk menampilkan gambar sebelum video dimuat), dapat digunakan dalam elemen video juga. Mozilla memiliki dokumentasi bagus tentang atribut ini.

Protokol streaming apa yang digunakan dengan HTML5?

HTML5 sendiri bukanlah protokol streaming. Situs web yang dibangun dengan HTML5 dapat menggunakan beberapa protokol streaming berbeda untuk memutar video, termasuk HTTP live streaming (HLS) dan MPEG-DASH. Ini dikonfigurasi di sisi server, bukan di kode markup HTML.

Baca juga tentang: 10 Aplikasi Terbaik untuk membuat Video Interaktif

Apakah semua browser mendukung HTML5 dan vide H5P?

Semua browser utama mendukung HTML5, artinya mereka dapat menafsirkan tag HTML5 yang bukan bagian dari versi HTML sebelumnya. Namun, tidak semua browser mendukung semua fitur HTML5. Anda dan developer elearning Anda harus ingat bahwa beberapa pengguna mungkin memiliki versi browser lama yang tidak dapat menafsirkan elemen video H5P.

Bagaimana situs web menyertakan konten video sebelum HTML5?

Sebelum HTML5 dirilis pada tahun 2008, video paling sering disematkan menggunakan plugin Adobe Flash. HTML5 memungkinkan pengembang untuk menyematkan video di halaman web hanya dengan menggunakan beberapa tag HTML, sehingga menghilangkan kebutuhan akan plugin. Akibatnya, Flash menjadi kurang diperlukan, dan Adobe akhirnya berhenti mendukung Flash pada tanggal 31 Desember 2020.

Baca juga tentang: Jasa Pembuatan LMS & Konten Elearning Jasa Raharja

Saat ini, sebagian besar pengguna dapat melakukan streaming video tanpa plugin browser tambahan, dan pengembang dapat menggunakan berbagai metode untuk menyematkan video tanpa bergantung pada plugin. Elemen video H5P adalah salah satu metode yang paling banyak digunakan untuk melakukannya.

Apa itu browser plugin atau plugin peramban?

Browser plugin atau plugin peramban adalah perangkat lunak yang menambahkan fitur ke browser yang tidak disertakan. Dulu browser tidak menyertakan kemampuan untuk memutar video. Plugin pihak ketiga seperti Adobe Flash membantu mengisi kesenjangan ini.

Baca juga tentang: Apa itu Scorm? Penjelasan Sederhana tentang Scorm dalam Dunia E-Learning

Namun, plugin juga dapat menimbulkan ancaman keamanan. Mereka menawarkan satu permukaan serangan lagi — cara tambahan bagi penyerang eksternal untuk menyusupi sesi penjelajahan — selain permukaan serangan yang disajikan oleh browser dan situs web. Selain itu, plugin dapat memperlambat fungsionalitas halaman. Mengandalkan plugin berarti beberapa perangkat lunak harus bekerja dengan baik dan cepat untuk memuat halaman web, bukan hanya satu.

Jika video disematkan secara asli, yang dimungkinkan dalam HTML5, video akan dimuat lebih cepat. Menghindari penggunaan plugin juga lebih aman.

Jenis konten HTML5

Selain video H5P, HTML5 juga menawarkan lebih dari 40 tipe konten berbeda yang diklasifikasikan ke dalam empat kategori berikut: Game, Multimedia, Questions, dan Social Media. 

Baca juga tentang: Jasa E-learning LMS BPK (Badan Pemeriksa Keuangan)

H5P memudahkan pembuatan konten interaktif dengan menyediakan berbagai jenis konten untuk berbagai kebutuhan. Anda dapat membuat konten interaktif dengan menambahkan plugin H5P ke situs WordPress, Moodle, atau Drupal Anda, atau mengintegrasikannya melalui LTI dengan Canvas, Brightspace, Blackboard, dan banyak VLE lain yang mendukung integrasi LTI.

Pratinjau tipe konten HTML5

Berikut ini adalah pratinjau tipe konten HTML5

• Accordion

Buat item yang dapat diperluas yang ditumpuk secara vertikal

• Advent Calendar (beta)

Membuat advent calendar 

Baca juga tentang: Jasa Pembuatan E-Learning HTML 5: Sebuah Masa Depan E-Learning

• Agamotto

Buat rangkaian gambar yang berubah secara bertahap

• AR Scavenger

Augmented reality yang menyenangkan

• Arithmetic Quiz

Buat kuis aritmatika berbasis waktu

• Audio Recorder

Buat rekaman audio

Baca juga tentang: Jasa Pembuatan E-learning & LMS KPU (Komisi Pemilihan Umum)

• Chart

Buat diagram batang dan lingkaran dengan cepat

• Collage

Buat kolase dari banyak gambar

• Column

Tata letak kolom untuk Konten H5P

• Cornell Notes

Buat catatan menggunakan sistem Cornell

Baca juga tentang: Jasa Elearning LMS KPPU (Komisi Pengawasan Persaingan Usaha)

• Crosswords

Buatlah teka-teki silang

• Dialog Cards

Buat text-based turning card 

• Dictation

Buat dikte dengan umpan balik instan

• Documentation Tools

Membuat wizard formulir dengan ekspor teks

Baca juga tentang: 4 Strategi Meningkatkan Kualitas Elearning dalam Pembelajaran

• Drag and Drop

Buat tugas drag-and-drop dengan gambar

• Drag the Words 

Buat tugas seret dan lepas berbasis teks

• Essay

Membuat esai dengan umpan balik instan

• Fill in the Blanks

Buat tugas dengan kata-kata yang hilang dalam teks

Baca juga tentang: Jasa Pembuatan E-learning dan LMS Komnasham (Komisi Nasional Hak Asasi Manusia)

• Find Multiple Hotspots

Buat banyak hotspot untuk ditemukan pengguna

• Find the Hotspot

Membuat hotspot gambar agar pengguna dapat menemukannya

• Find the Words

Permainan pencarian kata bergaya grid

• Flashcards 

Buat kartu flash yang bergaya dan modern

Baca juga tentang: 10 Tips Menggunakan Video E-Learning dengan Efektif

• Game Map 

Buat peta permainan interaktif

• Guess the Answers 

Buat gambar dengan tombol tanya jawab

• Iframe Embedder

Sematkan dari url atau sekumpulan file

• Image Choice

Buat tugas jika alternatifnya adalah gambar

Baca juga tentang: Jasa Pembuatan Video Pembelajaran

• Image Hotspot 

Buat gambar dengan beberapa hotspot info

• Image Juxtaposition 

Buat gambar interaktif

• Image Pairing

Permainan drag and drop pencocokan gambar

• Image Sequencing 

Tempatkan gambar dalam urutan yang benar

Baca juga tentang: Jasa Pembuatan HTML 5 Elearning Terbaik dan Menguntungkan

• Image Slider 

Buat Image Slider dengan mudah

• Impressive Presentation (ALPHA)

Buat tayangan slide dengan efek paralaks

• Information Wall 

Membuat panel informasi yang dapat dicari

• Interactive Book 

Buat kursus, buku, atau tes

Baca juga tentang: Jasa Video Interaktif Elearning Berikan Pemahaman Lebih Mudah

• KewAr Code

Buat kode QR untuk tujuan berbeda

• Mark the Words

Buat tugas di mana pengguna menyorot kata-kata

• Memory Game

Membuat game memasangkan gambar klasik

• Multiple Choice 

Buat pertanyaan pilihan ganda yang fleksibel

Baca juga tentang: Jasa Desain Presentasi e-Learning dan Alasan Penting Memilihnya

• Personality Quiz 

Buat kuis kepribadian

• Questionnaire 

Buat kuesioner untuk menerima umpan balik

• Quiz (Kumpulan Pertanyaan)

Membuat urutan berbagai jenis pertanyaan

• Single Choice Set 

Buat pertanyaan dengan satu jawaban yang benar

Baca juga tentang: Penyedia Jasa Video Pembelajaran Elearning Terpercaya

• Sort the Paragraphs

Buat satu set paragraf untuk diurutkan

• Speak the Words 

Jawab pertanyaan menggunakan suara Anda

• Speak the Words Set 

Serangkaian pertanyaan dijawab dengan suara

• Structure Strip 

Strip struktur interaktif

Baca juga tentang: Jasa Pembuatan Modul E-Learning Interaktif dan 8 Manfaatnya

• Summary 

Buat tugas dengan daftar pernyataan

• Timeline

Buat timeline acara dengan multimedia

• True/False Question 

Membuat pertanyaan True/False

• Virtual Tour (360)

Ciptakan lingkungan 360 yang interaktif

Baca juga tentang: Jasa Pembuatan Modul Interaktif Paling Dicari Saat Ini

• Complex Fill the Banks 

Isilah kata kata yang hilang

• Interactive Video 

Buat video H5P yang diperkaya dengan interaksi

• Course Presentation 

Buat presentasi dengan slide interaktif

• Branching Scenarios 

Ciptakan dilema dan pembelajaran mandiri

Baca juga tentang: Jasa Media Interaktif Elearning Dukung Pembelajaran Masa Kini

Kembangkan Video H5P Anda bersama Elearning4id

Tertarik untuk mengembangkan video H5P atau membuat konten HTML5 lainnya? Bermitra bersama Elearning4id dalam pengembangan konten HTML5 adalah langkah paling tepat yang dapat Anda ambil.

Elearning4id adalah vendor jasa pembuatan elearning terbaik milik PT Sora Kreatif Indonesia yang telah berpengalaman sejak tahun 2016. Bersama Elearning4id, Anda bisa mengoptimalkan pengembangan video H5P dan konten HTML5 lainnya. Beberapa media yang dapat dikembangkan antara lain media e-learning interaktif dengan format HTML5 & SCORM 1.2, gamification elearning dengan beragam format, modul pembelajaran, Video elearning seperti Video Presentasi pembelajaran, Video Animasi 2D dan 3D, hingga  Augmented Reality (AR) & Virtual Reality (VR) serta Sistem manajemen pembelajaran (LMS).

Baca juga tentang: Jasa Pembuatan LMS Terbaik dan Berkualitas

Beragam Layanan Elearning4id

Bukan hanya itu, Anda juga bisa mendiskusikan apapun kebutuhan elearning Anda bersama Elearning4id. Lebih lengkapnya, berikut ini adalah berbagai layanan jasa dan produk yang Elearning4id tawarkan kepada Anda, yaitu:

• Layanan Media Interaktif: Pembuatan media e-learning interaktif dengan format Html 5 & Scorm 1.2
• Video Presentasi: Jasa Pembuatan Video Pembelajaran dengan Presenter dan Animasi Infografis sebagai penjelasan
• Desain modul pembelajaran: Layanan desain modul pembelajaran menjadi lebih menarik dengan infografis dan animasi dalam bentuk powerpoint / PDF interaktif / Ebook
• Video animasi 2D: Jasa Pembuatan Video Elearning berupa motion grafis, video penjelasan, videoscribe, dll
• Video animasi 3D: Jasa pembuatan video edukasi animasi 3D untuk simulasi peralatan mesin, simulasi aktivitas, dll.
• Sistem manajemen pembelajaran (LMS): Membuat sistem e-learning menggunakan Moodle, WordPress, atau mengembangkan LMS khusus.
• Desain komik interaktif: Menyajikan materi secara menarik melalui ilustrasi komik yang menarik dan mudah dipahami
• Simulasi 3D augmented reality (AR) & virtual reality (VR) menjadi lebih interaktif dan menarik dengan penerapan AR & VR pada e-learning

Anda tentu tidak ingin melewatkan kesempatan untuk mengembangkan video H5P terbaik bersama Elearning4id, bukan? Jangan tunda lagi, segera hubungi nomor kontak tim Elearning4id untuk informasi lebih lanjut