Bagaimana untuk membuat satu slaid HTML5

HTML5, sebagai web generasi akan datang yang standard, adalah di sudut. Anda akan menambah sokongan HTML5 ke laman web anda? Mungkin sudah tiba masanya sekurang-kurangnya untuk menyediakan. Artikel ini akan menunjukkan kepada anda 2 cara-cara untuk membuat tayangan slaid HTML5 dan menerapkan ke laman web anda.

Diri berjalan HTML5 slaid

Salah satu peningkatan terbesar daripada HTML5 adalah bahawa anda terus boleh menerapkan dan memainkan video dalam talian dengan menggunakan. Dengan cara ini, para pengunjung boleh menonton slaid HTML5 selagi pelayar mereka menyokong HTML5. Tiada pemain Flash diperlukan. Sejak HTML5 yang tidak datang untuk versi akhir, video codec mungkin boleh menggunakan WebM, H264, Ogv atau kedua-duanya.

Berikut adalah bagaimana anda boleh embed video tayangan slaid HTML5 yang:

< video poster="movie.jpg" Kawalan >
< sumber src='movie.webm' jenis =' video/webm; codec = "vp8.0, vorbis" ' / >
< sumber src='movie.ogv' jenis =' video/ogg; codec = "theora, vorbis" ' / >
< sumber src='movie.mp4' jenis =' video/mp4; codec = "avc1.4D401E, mp4a.40.2"'/ >
< / video >

Jika anda lihat video di bawah, pelayar web anda menyokong HTML5, terlalu. Pada masa kini, kebanyakan pelayar yang menyokong tayangan slaid HTML5 sudah. Lihat lebih banyak butiran mengenai HTML5 pelayar.

HTML5 slaid video dicipta dengan DVD Slideshow Builder Deluxe - lebih 100 peralihan yang disertakan.

Sekarang apa yang anda perlukan adalah hanya HTML5 slaid perisian dan cipta tayangan video dalam format MP4 (AVC) .

Slaid interaktif HTML5

Seperti slaid Flash kini digunakan di laman web, anda juga boleh Reka bentuk untuk HTML5 tayangan slaid tanpa memasang apa-apa. Sudah tentu, anda tidak perlu menulis codec. Di sini kami mengambil yang dikongsi secara meluas HTML5 slaid dalam talian sebagai contoh untuk menunjukkan kepada anda bagaimana untuk menerapkan satu slaid HTML5.

1. letakkan fail di tempat yang betul.

Apabila anda muat turun fail projek HTML5 dari sini, unzip fail kepada komputer anda, dan memindahkan atau muat naik ke dalam folder Laman web anda.

Terdapat juga orang lain mengongsi HTML5 slaid projek mereka dalam talian. Google untuk satu dan perubahan yang sesuai dengan keperluan anda. Ia adalah lebih baik untuk meletakkan notis hak cipta untuk mengucapkan terima kasih kepada kerja orang lain, atau mengikut penyata lesen.

2. menukar kod untuk memenuhi keperluan anda

Biasanya, anda tidak perlu mengubah kod fail css dan js, kecuali alamat link tersebut jika anda telah meletakkan mereka dalam folder lain. Sebagai contoh, anda perlu menukar alamat pautan fail css kepada 'scripts/script.js' jika anda telah berpindah script.js fail ke dalam folder sedia ada dipanggil 'skrip'. Alamat pautan jenis ini dipanggil link relatif, manakala jenis lain adalah link yang mutlak, seperti http://yoursite.com/scripts/script.js. Jika slaid HTML5 menerapkan dalam folder Laman, anda perlu menggunakan sesuatu seperti '... /scripts/script.js'. Anda akan lebih baik menggunakan pautan mutlak jika anda tidak biasa dengan perbezaan.

Bahagian paling penting slaid HTML5 ini ditandakan dalam kotak merah. Salin Kod ini ke dalam mana-mana halaman yang anda mahu HTML5 tayangan slaid untuk memaparkan dan Tukar alamat imej seperti diterangkan di atas.

Klik untuk besarkan.

3. pratonton dengan HTML5 pelayar

Akhir sekali, lihat bagaimana slaid HTML5 kelihatan seperti di browser HTML5 anda. Biasanya, anda akan mendapat ini slaid HTML5. Pada halaman, anda juga boleh memuat turun fail tayangan slaid HTML5 dan melihat proses terperinci reka bentuk oleh Martin Angelov.

Juga menyemak Flash tayangan slaid template untuk membuat laman web slaid klik.