Teg video HTML5 menjadikannya mudah untuk menambah video ke halaman Web anda. Tetapi sementara kelihatannya mudah di permukaan, terdapat banyak perkara yang perlu anda lakukan untuk mendapatkan video anda dan berjalan. Tutorial ini akan membawa anda melalui langkah-langkah untuk membuat halaman dalam HTML5 yang akan menjalankan video dalam semua penyemak imbas moden.
- Mengehadkan Video HTML5 Anda Sendiri vs Menggunakan YouTube
- Tinjauan Ringkas Sokongan Video di Web
- Buat dan Edit Video Anda
- Tukar Video ke Ogg untuk Firefox
- Tukar Video ke MP4 untuk Safari
- Tukar Video ke FLV untuk Internet Explorer
- Tambah Unsur Video ke Laman Web Anda
- Tambah JavaScript dan Flash Player untuk Dapatkan Internet Explorer berfungsi
- Uji dalam Sebagai Banyak Pelayan Seperti Anda Boleh
Hosting HTML Anda Sendiri 5 Video vs Menggunakan YouTube
YouTube adalah laman web yang hebat. Ia menjadikannya mudah untuk membenamkan video ke laman web dengan cepat, dan dengan beberapa pengecualian yang kecil adalah agak lancar dalam pelaksanaan video tersebut. Jika anda menyiarkan video di YouTube, anda boleh yakin bahawa sesiapa sahaja akan dapat menontonnya.
Tetapi Menggunakan YouTube untuk Benamkan Video Anda Memiliki Beberapa Kelemahan
Kebanyakan masalah dengan YouTube adalah di sisi pengguna, bukannya di sisi pereka, seperti:
- Mencari perlahan dan pengindeksan
- Pemadaman pelayan
- Kandungan dikeluarkan (seolah-olah) sewenang-wenangnya
- Kandungan yang terlalu buruk
Tetapi ada beberapa sebab mengapa YouTube tidak baik untuk pemaju kandungan juga, termasuk:
- Panjang maksimum 10 minit untuk video (untuk akaun percuma)
- Prestasi muat naik yang lemah
- YouTube mendapat hak penggunaan tanpa had untuk video anda
- Mana-mana pengguna YouTube mendapat hak penggunaan tanpa had untuk video anda
Video HTML5 memberi beberapa kelebihan ke atas YouTube
Menggunakan HTML5 untuk video akan membolehkan anda mengawal setiap aspek video anda, dari siapa yang boleh melihatnya, berapa lama kandungan kandungannya, di mana ia dihoskan dan bagaimana pelayan berfungsi. Dan video HTML5 memberi anda kesempatan untuk mengekod video anda dalam banyak format yang anda perlukan untuk memastikan bilangan maksimum orang dapat melihatnya. Pelanggan anda tidak memerlukan plugin atau menunggu sehingga YouTube mengeluarkan versi yang lebih baru.
Tentu saja, Tawaran Video HTML5 Ada Kelemahan
Ini termasuk:
- Anda perlu mengekod video anda dalam sekurang-kurangnya tiga codec yang berbeza
- Anda perlu memasukkan beberapa JavaScript untuk memastikan penyemak imbas yang tidak menyokong HTML5 akan berfungsi
- Pelayan anda harus dapat mengendalikan keperluan bandwidth hosting video
Continue Reading Below
02 dari 10Tinjauan Ringkas Sokongan Video di Web
Menambah video ke laman web telah lama menjadi proses yang sukar. Ada banyak perkara yang boleh salah:
- Pertama, anda menggunakan tag untuk membenamkan video anda ke halaman anda. TETAPI tanda itu tidak lagi memihak kepada tag lain. Dan beberapa pelayar tidak pernah menyokongnya dengan baik.
- Jadi anda beralih ke tag, tetapi pelayar yang lebih lama tidak menyokongnya dan pelayar yang lebih baru tidak lengkap dalam sokongannya.
- Kemudian anda berfikir Flash! Dan encode video anda sebagai fail FLV. Tetapi Flash tidak disokong pada banyak peranti mudah alih dan banyak orang yang tidak suka Flash tidak peduli bagaimana ia digunakan (25% responden dalam tinjauan saya bertanya tentang bagaimana perasaan anda tentang Flash menyatakan bahawa mereka tidak boleh berdiri Flash dengan apa-apa cara).
- Oleh itu, anda membuat keputusan untuk memuat naik video anda ke laman penyematan video seperti YouTube, tetapi anda mempunyai masalah dengan YouTube yang dibincangkan.
- Akhir sekali, anda membuat keputusan untuk pergi menggunakan HTML5, tetapi Internet Explorer tidak menyokongnya (tidak sehingga Internet Explorer 9). Dan walaupun anda lakukan, terdapat dua standard codec video yang disokong dan hanya satu pelayar yang boleh menggunakan kedua-duanya. Sokongan Penyemak Imbas untuk Video Codecs and Containers
Jadi apa yang anda perlu buat? Pemberian video tidak lagi menjadi pilihan untuk kebanyakan laman web, kerana video semakin menjadi penting. Dan banyak laman web telah berjaya beralih ke video.
Halaman-halaman berikut artikel ini akan melangkah anda melalui cara menambah video ke laman 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 mempunyai kunci yang anda perlukan untuk menambah sokongan untuk pelayar lama yang lain jika perlu.
Continue Reading Below
03 dari 10Buat dan Edit Video Anda
Perkara pertama yang anda perlukan apabila anda akan meletakkan video pada halaman Web adalah video sebenar. Anda boleh menembak secara berterusan dan mengedit selepasnya untuk membuat ciri, atau anda boleh membuat skrip dan merancangnya terlebih dahulu. Sama ada cara berfungsi dengan baik, ia hanya apa sahaja yang anda selesaikan. Jika anda tidak tahu jenis video yang perlu anda buat, periksa idea ini dari Panduan Video Desktop:
- Projek Video Keluarga
- Pemasaran dan Video Promosi
- Lawatan Maya Video
- Cara Video
- Video Pernikahan
Ketahui Bagaimana Merekam Video Berkualiti Tinggi
Pastikan anda tahu bagaimana untuk merakam di dalam rumah dan di luar serta bagaimana untuk merakam audio. Pencahayaan juga sangat penting - tembakan yang terlalu terang menyakiti mata, dan terlalu gelap hanya kelihatan berlumpur dan tidak profesional. Walaupun anda hanya bercadang untuk mempunyai video 30 saat di laman web anda, kualiti yang lebih tinggi adalah lebih baik ia akan mencerminkan pada laman web anda.
Ingat juga bahawa hak cipta terpakai kepada sebarang bunyi atau muzik (serta rakaman stok) yang mungkin anda ingin gunakan dalam video anda. Jika anda tidak mempunyai akses kepada rakan yang boleh menulis dan memainkan lagu untuk anda, anda perlu mencari muzik tanpa royalti untuk dimainkan di latar belakang. Terdapat juga tempat-tempat yang anda boleh menyimpan rakaman untuk menambah pada video anda.
Mengedit Video Anda
Tidak kira apa perisian pengeditan yang anda gunakan, selagi anda kenal dengannya dan boleh menggunakannya dengan berkesan. Gretchen, Panduan Video Desktop, mempunyai beberapa tip penyunting video profesional yang boleh membantu anda mengedit video anda agar kelihatan hebat.
Simpan Video Anda ke MOV atau AVI (atau MPG, CD, DV)
Untuk tutorial lain, kami akan mengandaikan bahawa video anda disimpan dalam beberapa jenis format (tidak dikompresi) berkualiti tinggi seperti AVI atau MOV. Walaupun anda boleh menggunakan fail-fail ini, anda menghadapi masalah dengan video yang telah dibincangkan. Halaman berikut akan menerangkan cara menukar fail anda menjadi tiga jenis supaya dapat dilihat oleh jumlah pelayar yang paling banyak.
04 dari 10Tukar Video ke Ogg untuk Firefox
Format pertama yang akan kami ubah ialah Ogg (kadangkala dipanggil Ogg-Theora). Format ini adalah yang Firefox 3.5, Opera 10.5, dan Chrome 3 boleh dilihat semua.
Malangnya, sementara Ogg mempunyai sokongan penyemak imbas, banyak program video terkenal yang boleh anda beli (Adobe Media Encoder, QuickTime, dll.) Tidak menawarkan pilihan penukaran Ogg. Jadi satu-satunya cara untuk menukar video anda kepada Ogg adalah mencari program penukaran di Web.
Pilihan Penukaran
Terdapat alat dalam talian yang dikenali sebagai Media-Convert yang menuntut untuk menukar pelbagai format video (dan audio) ke format video (dan audio) yang lain. Apabila kami mencubanya dengan video ujian 3 saat, kami tidak dapat mengerjakannya pada Mac saya. Tetapi anda mungkin mempunyai nasib yang lebih baik. Laman web ini mempunyai manfaat percuma.
Beberapa alatan lain yang kami dapati termasuk:
- Miro Video Converter (Windows Macintosh) - Program ini mempunyai manfaat untuk menukar kepada Ogg dan MP4 (H.264) dan ia adalah sumber terbuka.
- Koyote Video Converter (Windows)
- Free Video Converter Kami fikir ini mempunyai kedua-dua Windows dan versi Macintosh, tetapi sukar untuk memberitahu dari laman web mereka
- Simple Theora Encoder (Macintosh) - ini adalah yang kita cenderung untuk digunakan.
Sebaik sahaja anda mempunyai video anda yang disimpan dalam format Ogg, simpannya ke lokasi di laman web anda dan pergi ke halaman seterusnya untuk menukarnya ke format lain untuk penyemak imbas lain.
Continue Reading Below
05 dari 10Tukar Video ke MP4 untuk Safari
Format seterusnya yang anda mesti menukar video anda adalah MP4 (video H.264) supaya ia boleh dimainkan pada Safari 3 dan 4 dan iPhone dan Android. Plus, video H.264 boleh dengan mudah ditukar ke fail FLV untuk menonton pada Flash.
Format ini lebih mudah didapati dalam produk komersial, dan anda mungkin sudah mempunyai program yang akan ditukar ke MP4 jika anda mempunyai editor video. Sekiranya anda mempunyai Adobe Premiere anda boleh menggunakan Adobe Encoder Video, atau jika anda mempunyai QuickTime Pro yang akan berfungsi juga. Ramai penukar yang dibincangkan pada halaman sebelumnya juga akan menukar video ke MP4.
- MediaConvert - Alat AWS dalam talian.
- Miro Video Converter (Windows Macintosh) - Program ini mempunyai manfaat untuk menukar kepada Ogg dan MP4 (H.264) dan ia adalah sumber terbuka.
- SUPER (Windows) - akan menukar pelbagai jenis fail kepada MP4 dan FLV
- Free Video Converter Kami fikir ini mempunyai kedua-dua Windows dan versi Macintosh, tetapi sukar untuk memberitahu dari laman web mereka.
Simpan fail MP4 anda ke laman web anda dan kemudian anda perlu menukarnya ke Flash untuk Internet Explorer untuk digunakan.
06 dari 10Tukar Video ke FLV untuk Internet Explorer
Cara paling mudah untuk menukar video ke FLV adalah menggunakan Flash itu sendiri. Begitulah cara kita menukar video saya ke Flash. Tetapi jika anda tidak mempunyai Flash, berikut adalah dua alat popular untuk menukar fail ke FLV:
- SUPER (Windows) - akan menukar pelbagai jenis fail kepada MP4 dan FLV
- ffmpegX (Macintosh) - akan menukar banyak jenis fail yang berbeza kepada Mp4 dan FLV.
Simpan fail FLV anda ke laman web anda dan halaman seterusnya akan menunjukkan kepada anda cara menulis HTML supaya anda boleh memainkan video anda.
Continue Reading Below
07 daripada 10Tambah Unsur Video ke Laman Web Anda
Ia sangat mudah untuk menggunakan HTML 5 untuk menambah video ke halaman Web. Kebanyakan penyemak imbas moden menyokong HTML 5 video, walaupun mereka tidak semua menyokongnya dengan cara yang sama. Tetapi apa maksudnya ialah jika anda menyimpan video anda sebagai format Ogg dan MP4, anda boleh menulis hanya empat atau lima baris HTML untuk mendapatkannya dipaparkan di kebanyakan penyemak imbas moden (kecuali Internet Explorer 8). Ini caranya:
Tulis penanda kod HTML 5 supaya pelayar tahu mengharapkan HTML 5:
- Buat halaman Web anda seperti yang biasanya anda buat:
- Di dalam badan, letakkan
- Tentukan atribut apa yang anda mahu video anda: Kami mengesyorkan menggunakan kawalan dan pramuat. Gunakan pilihan poster jika video anda tidak mempunyai pemandangan pertama yang baik.
- autoplay - untuk bermula sebaik sahaja ia dimuat turun
- kawalan - membolehkan pembaca anda mengawal video (jeda, gulung mundur, pantas ke hadapan)
- gelung - mulakan video dari permulaan apabila ia berakhir
- pramuat - pra-muat turun video supaya ia lebih cepat siap apabila pelanggan mengklik padanya
- poster - tentukan imej yang anda mahu gunakan apabila video dihentikan
- Kemudian tambahkan fail sumber untuk dua versi video anda (MP4 dan OGG) di dalamnya
- Buka halaman dalam Chrome 1, Firefox 3.5, Opera 10, dan / atau Safari 4 dan pastikan ia dipaparkan dengan betul. Anda harus mengujinya dalam sekurang-kurangnya Firefox 3.5 dan Safari 4 - kerana setiap mereka menggunakan codec yang berbeza.
Itu sahaja. Sebaik sahaja anda mempunyai kod ini di tempat anda akan mempunyai video yang berfungsi di Firefox 3.5, Safari 4, Opera 10, dan Chrome 1. Tapi bagaimana dengan Internet Explorer?
Internet Explorer Tidak Menyukai HTML 5 atau yang
Di bahagian seterusnya, Kami akan membincangkan tentang apa yang boleh anda lakukan untuk mendapatkan IE 8 untuk bermain dengan tag video HTML 5 anda dan memaparkan video. Anda perlu menggunakan Flash.Berita baik ialah IE 9 dijangka menyokong HTML 5 dan tag video.
08 dari 10Tambah JavaScript dan Flash Player untuk Dapatkan Internet Explorer berfungsi
Anda mungkin menyedari bahawa dalam HTML halaman sebelumnya, tidak ada garisan sumber untuk fail FLV. Dan jika anda menguji halaman itu di Internet Explorer, ia tidak akan berfungsi. Itu kerana Internet Explorer tidak mengiktiraf HTML 5 dan ia tidak boleh memainkan video OGG atau MP4 secara asli. Untuk mendapatkan Internet Explorer 7 dan 8 untuk berfungsi, anda perlu memainkan video sebagai Flash. Tetapi ada lebih banyak langkah untuk mendapatkannya berfungsi daripada hanya menambah fail FLV.
Langkah 1: Dapatkan Pemain Video Flash untuk Laman Web Anda
Kami mengesyorkan mendapatkan FlowPlayer kerana ia adalah pemain video Flash sumber terbuka yang boleh anda pasang pada pelayan Web anda dan gunakan bila-bila masa anda mempunyai video Flash untuk dimainkan. Versi percuma FlowPlayer memasukkan iklan ke video anda, tetapi anda juga boleh membeli lesen komersial jika anda memerlukannya.
Ikut arahan di laman FlowPlayer untuk memasang FlowPlayer di laman web anda. Singkatnya, anda akan memasang 2 fail SWF dan fail JavaScript di laman web anda. Di bahagian bawah HTML anda, (sebelum tag) anda akan menambah baris:
Tetapi Internet Explorer masih tidak akan memainkan video, anda perlu mengajarnya bagaimana mengenali tag HTML 5.
Langkah 2: Mengandaikan Internet Explorer Membaca HTML 5 Tags
Terdapat skrip berguna di Kod Google yang dipanggil "HTML Shiv" yang akan membantu IE mengenali elemen HTML 5. Jadi dalam
dari dokumen HTML anda yang anda mahu merujuknya. Adalah lebih baik untuk memasukkannya ke dalam komen IE bersyarat supaya pelayar lain tidak keliru:
Baiklah, sekarang IE akan mengenali
