Всі теми

+
Home > Ресурс > поради > як зробити HTML5 слайдшоу

Як зробити HTML5 слайдшоу

HTML5, як наступного покоління web standard, не за горами. Ви б додати HTML5 підтримки на ваш сайт? Може бути, це час, по крайней мере, щоб підготувати. Ця стаття покаже вам 2 способи зробити слайд-шоу HTML5 і вставляти на ваш сайт.

Автоматичної HTML5 слайд-шоу

Один з найбільших оновлення HTML5, що ви безпосередньо можна вбудувати і відтворення відео в Інтернеті за допомогою. Таким чином, відвідувачі можуть дивитися HTML5 слайд-шоу, свій браузер підтримує HTML5. Немає Flash player, необхідних. Оскільки в HTML5 не збереглись до остаточного варіанту, відеокодек могли користуватися WebM, H264, Ogv або те й інше.

Ось як ви можете вставляти в HTML5 відео слайд-шоу:

< відео poster="movie.jpg" елементи керування >
< джерело src='movie.webm' тип =' відео/webm; кодеки = "vp8.0, vorbis" ' / >
< джерело src='movie.ogv' тип =' відео/ogg; кодеки = "theora, vorbis" ' / >
< джерело src='movie.mp4' тип =' відео/mp4; кодеки = "avc1.4D401E, mp4a.40.2"'/ >
< / відео >

Якщо ви можете бачити відео нижче, веб-браузери підтримують HTML5, теж. На сьогоднішній день більшість браузерів підтримують HTML5 слайд-шоу вже. Дізнайтеся більше про HTML5 браузерів.

HTML5 слайд-шоу відео створені за допомогою DVD Slideshow Builder Deluxe - понад 100 переходи включені.

Тепер вам потрібно тільки в HTML5 ПЗ для створення слайдшоу і створити слайд-шоу відео в форматі MP4 (AVC) .

Download Win Version

Інтерактивна HTML5 слайд-шоу

Як і в даний час використовується Flash слайд-шоу на веб-сайтах можна також створювати слайд-шоу HTML5 без установки що-небудь. Звичайно, не потрібно самому писати кодек. Тут ми приймаємо широко спільних HTML5 слайд-шоу онлайн для прикладу, щоб показати вам, як вставляти HTML5 слайд.

1. покласти файли в потрібному місці.

Під час завантаження файлу проекту HTML5 звідси, розпакувати файл на вашому комп'ютері і перемістити або завантажити в папку веб-сайту.

html5 slideshow

Є також інших людей, щоб частка їх HTML5 слайд-шоу проект онлайн. Google для одного і змінити відповідно до ваших потреб. Це краще поставити повідомлення про авторські права, щоб подякувати чужі роботи, або слідувати ліцензії заяви.

2. Зміна коду відповідно до ваших потреб

Зазвичай не потрібно змінювати код css і js файлів, за винятком адреси посилання, якщо ви помістіть їх в іншу папку. Наприклад, потрібно змінити адресу посилання css файл на 'scripts/script.js' Якщо ви перейшли script.js файл в наявну папку під назвою "сценаріїв". Цей тип адреси посилання називається відносне посилання, а інший тип є абсолютним посиланням, таких як http://yoursite.com/scripts/script.js. Якщо слайд-шоу HTML5 вставляти на сторінку в папці, ви повинні використовувати щось на зразок '... /Scripts/Script.js. Найкраще за допомогою абсолютне посилання Якщо ви не знайомі з відмінності.

Найбільш важливою частиною цього HTML5 слайд-шоу відзначається в червоному полі. Скопіюйте ці коди на будь-яку сторінку ви хочете HTML5 слайд-шоу, щоб переглянути та змінити адресу зображення як описано вище.

html5 slideshow code
Натисніть, щоб збільшити.

3. перегляньте з HTML5 браузерів

І нарешті, побачити, як слайд-шоу HTML5 виглядає в браузері HTML5. Як правило, ви можете цей слайд-шоу HTML5. На сторінці можна також завантажувати файли HTML5, слайд-шоу і побачити докладний процес, щоб створити його, Мартін Angelov.

Також подивіться Flash слайд-шоу шаблони зробити сайт слайд-шоу в кліків.

Запитання, що стосуються продукту? Говорити безпосередньо до нашої служби підтримки >>

Топ