Всички теми

+
Home > Ресурси > съвети > Как да направите слайдшоу HTML5

Как да се направи на HTML5 слайдшоу

HTML5, следващото поколение интернет стандарт, е зад ъгъла. Ще добавите 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 "тип =" video/mp4; кодеци = "avc1.4D401E, mp4a.40.2"'/ >
< / видео >

Ако можете да видите видеото по-долу, вашите уеб браузъри подкрепа HTML5, също. В днешно време повечето браузъри поддържат HTML5 слайдшоу вече. Вижте повече подробности за HTML5 браузъри.

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

Сега това, което трябва е само HTML5 слайдшоу софтуер и Създайте слайдшоу видео в MP4 (AVC) формат.

Download Win Version

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

Като в момента използва флаш слайдшоу в уеб сайтове можете също да проектирате 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 слайдшоу файлове и да видите подробна процес да го проектираме от Мартин Ангелов.

Също така проверете флаш слайдшоу шаблони , за да направи сайт слайдшоута кликвания.

Въпроси, свързани с продукта? Говори директно на нашия екип за поддръжка >>

Топ T