Tag video HTML5 memudahkan untuk menambahkan video ke halaman Web Anda. Namun ketika tampak mudah di permukaan, ada banyak hal yang perlu Anda lakukan untuk membuat video Anda aktif dan berjalan. Tutorial ini akan membawa Anda melalui langkah-langkah untuk membuat halaman dalam HTML5 yang akan menjalankan video di semua browser modern.
- Hosting Video HTML5 Anda Sendiri vs. Menggunakan YouTube
- Ikhtisar Cepat Dukungan Video di Web
- Buat dan Edit Video Anda
- Konversikan Video ke Ogg untuk Firefox
- Konversikan Video ke MP4 untuk Safari
- Konversikan Video ke FLV untuk Internet Explorer
- Tambahkan Elemen Video ke Halaman Web Anda
- Tambahkan JavaScript dan Flash Player untuk Dapatkan Internet Explorer untuk Bekerja
- Uji di As Many Browsers As You Can
Hosting HTML Anda Sendiri 5 Video vs. Menggunakan YouTube
YouTube adalah situs hebat. Ini memudahkan untuk menanamkan video ke dalam halaman Web dengan cepat, dan dengan beberapa pengecualian kecil cukup lancar dalam pelaksanaannya dari video tersebut. Jika Anda memposting video di YouTube, Anda dapat cukup yakin bahwa siapa pun akan dapat menontonnya.
Tetapi Menggunakan YouTube untuk Menyematkan Video Anda Memiliki Beberapa Kelemahan
Sebagian besar masalah dengan YouTube ada di sisi konsumen, bukan di sisi perancang, hal-hal seperti:
- Pencarian dan pengindeksan lambat
- Server padam
- Konten yang dihapus (tampaknya) secara sewenang-wenang
- Terlalu banyak konten buruk
Tetapi ada beberapa alasan mengapa YouTube berdampak buruk bagi pengembang konten, termasuk:
- Durasi maksimum 10 menit untuk video (untuk akun gratis)
- Kinerja unggahan yang buruk
- YouTube mendapatkan hak penggunaan tanpa batas untuk video Anda
- Setiap pengguna YouTube mendapatkan hak penggunaan tanpa batas untuk video Anda
HTML5 Video Memberikan Beberapa Keunggulan Lebih dari YouTube
Menggunakan HTML5 untuk video akan memungkinkan Anda mengontrol setiap aspek dari video Anda, dari siapa yang dapat melihatnya, berapa lama, konten apa yang ada, di mana itu di-host dan bagaimana kinerja server. Dan video HTML5 memberi Anda kesempatan untuk menyandikan video Anda dalam berbagai format yang Anda perlukan untuk memastikan bahwa jumlah maksimum orang dapat melihatnya. Pelanggan Anda tidak memerlukan plugin atau menunggu sampai YouTube merilis versi yang lebih baru.
Tentu Saja, Tawaran Video HTML5 Beberapa Kelemahan
Ini termasuk:
- Anda harus menyandikan video Anda setidaknya dalam tiga codec yang berbeda
- Anda harus menyertakan beberapa JavaScript untuk memastikan browser yang tidak mendukung HTML5 akan berfungsi
- Server Anda harus dapat menangani persyaratan bandwidth dari hosting video
Lanjutkan Membaca Di Bawah Ini
02 dari 10Ikhtisar Cepat Dukungan Video di Web
Menambahkan video ke halaman Web telah lama menjadi proses yang sulit. Ada begitu banyak hal yang bisa salah:
- Pertama, Anda menggunakan tag untuk menyematkan video Anda ke halaman Anda. TAPI tag itu tidak lagi digunakan untuk tag lain. Dan beberapa browser tidak pernah mendukungnya dengan baik.
- Jadi Anda beralih ke tag, tetapi peramban yang lebih lama tidak mendukungnya dan peramban yang lebih baru tidak jelas dalam dukungannya.
- Maka Anda berpikir Flash! Dan encode video Anda sebagai file FLV. Namun, Flash tidak didukung di banyak perangkat seluler dan banyak orang membenci Flash, tidak peduli bagaimana penggunaannya (25% responden di polling saya bertanya tentang bagaimana perasaan Anda tentang Flash menyatakan bahwa mereka tidak tahan Flash dengan cara apa pun).
- Jadi Anda memutuskan untuk mengunggah video Anda ke situs penyematan video seperti YouTube, tetapi kemudian Anda memiliki masalah dengan YouTube yang kami diskusikan.
- Akhirnya, Anda memutuskan untuk menggunakan HTML5, tetapi Internet Explorer tidak mendukungnya (tidak sampai Internet Explorer 9). Dan bahkan jika Anda melakukannya, ada dua standar codec video yang didukung dan hanya satu browser yang dapat menggunakan keduanya. Dukungan Browser untuk Video Codec dan Kontainer
Jadi apa yang harus kamu lakukan? Menyerah pada video tidak lagi menjadi pilihan untuk sebagian besar situs, karena video menjadi semakin penting. Dan banyak situs berhasil beralih ke video.
Halaman-halaman berikut dari artikel ini akan memandu Anda melalui cara menambahkan video ke halaman Web Anda yang berfungsi di Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 dan 4, iPhone dan Android, Flash, dan Internet Explorer 7 dan 8. Anda akan juga memiliki kunci yang perlu Anda tambahkan dukungan untuk peramban lama lainnya jika perlu.
Lanjutkan Membaca Di Bawah Ini
03 dari 10Buat dan Edit Video Anda
Hal pertama yang Anda butuhkan ketika Anda akan menempatkan video di halaman Web adalah video yang sebenarnya. Anda dapat memotret secara terus-menerus dan mengedit setelahnya untuk membuat fitur, atau Anda dapat membuatnya skrip dan merencanakannya terlebih dahulu. Cara mana pun bekerja dengan baik, hanya saja Anda merasa nyaman. Jika Anda tidak tahu jenis video apa yang harus Anda buat, lihat ide-ide ini dari Panduan Video Desktop:
- Proyek Video Keluarga
- Video Pemasaran dan Promosi
- Tur Virtual Video
- Cara Melakukan Video
- Video Pernikahan
Pelajari Cara Merekam Video Berkualitas Tinggi
Pastikan Anda tahu cara merekam di dalam dan di luar ruangan serta cara merekam audio. Pencahayaan juga sangat penting - bidikan yang terlalu terang melukai mata, dan terlalu gelap hanya terlihat berlumpur dan tidak profesional. Bahkan jika Anda hanya berencana untuk memiliki video 30 detik di situs Anda, kualitas yang lebih tinggi itu lebih baik akan mencerminkan situs web Anda.
Ingat juga bahwa hak cipta berlaku untuk suara atau musik apa pun (serta cuplikan saham) yang mungkin ingin Anda gunakan dalam video Anda. Jika Anda tidak memiliki akses ke teman yang dapat menulis dan memutar lagu untuk Anda, Anda harus mencari musik bebas royalti untuk diputar di latar belakang. Ada juga tempat-tempat yang dapat Anda bagikan rekaman untuk ditambahkan ke video Anda.
Mengedit Video Anda
Tidak masalah perangkat lunak pengedit apa yang Anda gunakan, selama Anda terbiasa dengannya dan dapat menggunakannya secara efektif. Gretchen, Panduan Video Desktop, memiliki beberapa kiat pengeditan video profesional yang dapat membantu Anda mengedit video Anda sehingga terlihat bagus.
Simpan Video Anda ke MOV atau AVI (atau MPG, CD, DV)
Untuk sisa tutorial ini, kami akan menganggap Anda memiliki video Anda disimpan dalam beberapa jenis kualitas tinggi (non-kompresi) format seperti AVI atau MOV. Meskipun Anda dapat menggunakan file-file ini apa adanya, Anda mengalami semua masalah dengan video yang sudah kita bahas. Halaman-halaman berikut akan menjelaskan bagaimana mengkonversi file Anda menjadi tiga jenis sehingga dapat dilihat oleh sejumlah besar browser.
04 dari 10Konversikan Video ke Ogg untuk Firefox
Format pertama yang akan kita konversi adalah Ogg (kadang-kadang disebut Ogg-Theora). Format ini adalah salah satu yang bisa dilihat oleh Firefox 3.5, Opera 10.5, dan Chrome 3.
Sayangnya, meskipun Ogg memiliki dukungan browser, banyak program video terkenal yang dapat Anda beli (Adobe Media Encoder, QuickTime, dll.) Tidak menawarkan opsi konversi Ogg. Jadi satu-satunya cara untuk mengonversi video Anda ke Ogg adalah menemukan program konversi di Web.
Opsi Konversi
Ada alat online bernama Media-Convert yang mengklaim untuk mengkonversi berbagai format video (dan audio) ke dalam format video (dan audio) lainnya. Ketika kami mencobanya dengan video pengujian 3 detik saya, kami tidak bisa membuatnya bekerja di Mac saya. Tetapi Anda mungkin memiliki keberuntungan yang lebih baik. Situs ini memiliki manfaat gratis.
Beberapa alat lain yang kami temukan meliputi:
- Miro Video Converter (Windows Macintosh) - Program ini memiliki manfaat mengkonversi ke Ogg dan MP4 (H.264) dan itu open source.
- Koyote Video Converter (Windows)
- Free Video Converter Kami pikir ini memiliki versi Windows dan Macintosh, tetapi sulit untuk mengatakannya dari situs mereka
- Simple Theora Encoder (Macintosh) - ini adalah yang cenderung kita gunakan.
Setelah Anda menyimpan video Anda dalam format Ogg, simpan ke lokasi di situs web Anda dan masuk ke halaman berikutnya untuk mengonversinya ke format lain untuk peramban lain.
Lanjutkan Membaca Di Bawah Ini
05 dari 10Konversikan Video ke MP4 untuk Safari
Format selanjutnya Anda harus mengkonversi video Anda menjadi MP4 (H.264 video) sehingga dapat dimainkan di Safari 3 dan 4 serta iPhone dan Android. Plus, H.264 video dapat dengan mudah dikonversi ke file FLV untuk ditonton di Flash.
Format ini lebih tersedia di produk komersial, dan Anda mungkin sudah memiliki program yang akan dikonversi ke MP4 jika Anda memiliki editor video. Jika Anda memiliki Adobe Premiere Anda dapat menggunakan Adobe Video Encoder, atau jika Anda memiliki QuickTime Pro yang akan berfungsi juga. Banyak konverter yang kita diskusikan pada halaman sebelumnya juga akan mengkonversi video ke MP4.
- MediaConvert - Alat AWS online.
- Miro Video Converter (Windows Macintosh) - Program ini memiliki manfaat mengkonversi ke Ogg dan MP4 (H.264) dan itu open source.
- SUPER (Windows) - akan mengkonversi banyak jenis file ke MP4 dan FLV
- Free Video Converter Kami pikir ini memiliki versi Windows dan Macintosh, tetapi sulit untuk mengatakannya dari situs mereka.
Simpan file MP4 Anda ke situs web Anda dan kemudian Anda harus mengonversinya ke Flash untuk menggunakan Internet Explorer.
06 dari 10Konversikan Video ke FLV untuk Internet Explorer
Cara termudah untuk mengkonversi video ke FLV adalah dengan menggunakan Flash itu sendiri. Begitulah cara kami mengonversi video saya ke Flash. Tetapi jika Anda tidak memiliki Flash, berikut dua alat populer untuk mengonversi file ke FLV:
- SUPER (Windows) - akan mengkonversi banyak jenis file ke MP4 dan FLV
- ffmpegX (Macintosh) - akan mengkonversi banyak jenis file ke Mp4 dan FLV.
Simpan file FLV Anda ke situs web Anda dan halaman berikutnya akan menunjukkan Anda bagaimana menulis HTML sehingga Anda dapat memutar video Anda.
Lanjutkan Membaca Di Bawah Ini
07 dari 10Tambahkan Elemen Video ke Halaman Web Anda
Sangat mudah menggunakan HTML 5 untuk menambahkan video ke halaman Web. Kebanyakan peramban modern mendukung video HTML 5, meskipun mereka tidak mendukungnya dengan cara yang sama. Tetapi apa artinya ini adalah bahwa jika Anda menyimpan video Anda sebagai format Ogg dan MP4, Anda akan dapat menulis hanya empat atau lima baris HTML untuk membuatnya ditampilkan di sebagian besar peramban modern (kecuali Internet Explorer 8). Begini caranya:
Tuliskan penanda HTML doctype 5 sehingga browser tahu untuk mengharapkan HTML 5:
- Buat halaman Web Anda seperti biasanya Anda membuatnya:
- Di dalam tubuh, tempatkan
- Tentukan atribut apa yang Anda inginkan untuk video Anda: Kami merekomendasikan menggunakan kontrol dan preload. Gunakan opsi poster jika video Anda tidak memiliki adegan pertama yang baik.
- putar otomatis - untuk memulai segera setelah diunduh
- kontrol - izinkan pembaca Anda untuk mengontrol video (jeda, mundur, maju-cepat)
- loop - memulai video dari awal ketika berakhir
- pramoad - pra-unduh video sehingga siap lebih cepat ketika pelanggan mengkliknya
- poster - tentukan gambar yang ingin Anda gunakan saat video dihentikan
- Kemudian tambahkan file sumber untuk dua versi video Anda (MP4 dan OGG) di dalam
- Buka halaman di Chrome 1, Firefox 3.5, Opera 10, dan / atau Safari 4 dan pastikan menampilkan dengan benar. Anda harus mengujinya setidaknya di Firefox 3.5 dan Safari 4 - karena masing-masing menggunakan codec yang berbeda.
Itu dia. Setelah Anda memiliki kode ini di tempat Anda akan memiliki video yang berfungsi di Firefox 3.5, Safari 4, Opera 10, dan Chrome 1. Tetapi bagaimana dengan Internet Explorer?
Internet Explorer Tidak Menyukai HTML 5 atau
Di bagian selanjutnya, Kami akan membahas tentang apa yang dapat Anda lakukan agar IE 8 dapat bermain dengan baik dengan tag video HTML 5 Anda dan menampilkan video. Anda harus menggunakan Flash.Kabar baiknya adalah IE 9 diharapkan mendukung HTML 5 dan tag video.
08 dari 10Tambahkan JavaScript dan Flash Player untuk Dapatkan Internet Explorer untuk Bekerja
Anda mungkin telah memperhatikan bahwa di halaman sebelumnya HTML, tidak ada baris sumber untuk file FLV. Dan jika Anda menguji halaman itu di Internet Explorer, itu tidak akan berhasil. Itu karena Internet Explorer tidak mengenali HTML 5 dan tidak dapat memutar video OGG atau MP4 secara asli. Agar Internet Explorer 7 dan 8 berfungsi, Anda harus memainkannya sebagai Flash. Tetapi ada lebih banyak langkah untuk membuatnya berfungsi daripada hanya menambahkan file FLV.
Langkah 1: Dapatkan Flash Video Player untuk Situs Web Anda
Kami merekomendasikan untuk mendapatkan FlowPlayer karena ini adalah pemutar video Flash sumber terbuka yang dapat Anda instal di server Web dan digunakan setiap kali Anda memiliki video Flash untuk bermain. Versi gratis FlowPlayer menyisipkan iklan ke dalam video Anda, tetapi Anda juga dapat membeli lisensi komersial jika Anda membutuhkannya.
Ikuti petunjuk di situs FlowPlayer untuk menginstal FlowPlayer di situs web Anda. Singkatnya, Anda akan menginstal 2 file SWF dan file JavaScript di situs Anda. Di bagian bawah HTML Anda, (sebelum tag) Anda akan menambahkan satu baris:
Tetapi Internet Explorer masih tidak akan memutar video, Anda harus mengajarkannya cara mengenali tag HTML 5.
Langkah 2: Meyakinkan Internet Explorer untuk Membaca Tag HTML 5
Ada script yang berguna di Google Code yang disebut "HTML Shiv" yang akan membantu IE mengenali elemen HTML 5. Jadi dalam
dokumen HTML Anda yang ingin Anda rujuk. Sebaiknya sertakan dalam komentar bersyarat IE sehingga peramban lain tidak bingung:
Oke, sekarang IE akan mengenali
