HTML 5 бейне тегі Веб-беттерге бейнелерді оңай қосады. Бірақ бет үстінде оңай болғанмен, бейнеңізді және жұмыс істеу үшін сізге қажет нәрселер бар. Бұл оқулық сізді қазіргі заманғы браузерлерде бейне іске қосатын HTML 5-дегі бетті жасау қадамдары арқылы алады.
- Өзіңіздің меншікті HTML хостингіңізді YouTube сайтында пайдалану
- Вебтегі бейне қолдауды жылдам шолу
- Бейнеңізді жасау және өңдеу
- Бейнефильмді Firefox үшін Ogg-ге түрлендіру
- Бейнежазбаны Safari үшін MP4 файлына түрлендіру
- Internet Explorer бағдарламасына бейне FLV түрлендіру
- Бейне элементтерін веб-бетке қосыңыз
- 1-бөлікті жұмыс істеу үшін Internet Explorer бағдарламасын алу үшін JavaScript және Flash Player қосыңыз
- Көптеген браузерлер ретінде мүмкіндігінше тестілеу
01-тен 10-ке дейін
Өзіңіздің меншікті HTML хостингіңізді YouTube сайтында пайдалану
YouTube - керемет сайт. Бұл веб-беттерге бейнелерді тез ендіруді жеңілдетеді, ал кейбір қоспалармен бұл бейнежазбалардың орындалуында өте қиын. Егер YouTube-да бейнені орналастырсаңыз, кез-келген адам оны көре алатынына сенімді бола аласыз.
Бірақ YouTube-ды пайдалану арқылы бейнеңізді орналастыру кейбір кемшіліктерге ие
YouTube проблемаларының көпшілігі дизайнер тарапынан емес, тұтынушы жағында болады:
- Баяу іздеу және индекстеу
- Сервердің өшуі
- Мазмұн жойылады (көрінгенімен) еріксіз
- Өте жаман мазмұн
Бірақ контент әзірлеушілеріне де YouTube нашар себептері бар, оның ішінде:
- Бейнелер үшін ең көп 10 минут (тегін шоттар үшін)
- Кері жүктеудің нашарлығы
- YouTube бейнеңізге шексіз пайдалану құқықтарын алады
- Кез келген YouTube пайдаланушысы бейнеңізге шексіз пайдалану құқықтарын алады
HTML 5 бейне YouTube сайтында кейбір артықшылықтар береді
Бейне үшін HTML 5- ні пайдалану бейнеңіздің барлық аспектілерін, оны кім көре алатындығынан, қанша уақытты, мазмұны бар екенін, қайда орналастырылғандығын және сервердің қалай орындалатындығын басқаруға мүмкіндік береді. Сондай-ақ, HTML 5 бейнесі бейненің көп форматтармен кодталу мүмкіндігін береді, себебі оның ең көп саны оны көре алатындығына көз жеткізу керек. Сіздің клиенттеріңізге плагин қажет емес немесе YouTube жаңа нұсқасын шығармайынша күте алады.
Әрине, HTML 5 бейне кейбір кемшіліктерді ұсынады
Оларға мыналар жатады:
- Бейнеңізді кем дегенде үш түрлі кодектерде кодтау керек
- HTML 5 қолдамайтын шолғыштар жұмыс істейтініне кепілдік беру үшін кейбір JavaScript қосыңыз
- Серверіңіздің хостинг бейнелерінің өткізу қабілеттілігінің талаптарын өңдеу мүмкіндігі болуы керек
02-тен 10-ға дейін
Вебтегі бейне қолдауды жылдам шолу
Веб-беттерге бейне қосу қиынға соқты. Қате болатын көптеген нәрсе болған:
- Алдымен, бейнеңізді бетіңізге ендіру үшін
- Сондықтан сіз
- Сонда сіз « Flash !» Деп ойлайсыз. Бейнеңізді FLV файлы ретінде кодтау. Бірақ Flash көптеген мобильді құрылғыларда қолдау көрсетпейді, және көптеген адамдар Flash-ті қалай жек көретініне қарамастан жек көреді (менің сауалнамаға жауап бергендердің 25% -ы Форд туралы қалай ойлайтыныңызды Flash-тың қандай да бір жолмен тұра алмайтынын айтты).
- Осылайша, сіз бейнеңізді YouTube сияқты бейнеге қосу сайтына жүктеуді шешесіз, бірақ содан кейін YouTube-мен талқылаған мәселелер бар.
- Ақырында, сіз HTML 5-ге баруды шешесіз, бірақ Internet Explorer оны қолдамайды (Internet Explorer 9 дейін емес). Тіпті егер сіз жасасаңыз да, қолдау көрсетілетін екі бейне кодекті стандарт бар және екеуін де пайдалана алатын бір шолғыш бар. Бейне кодектеріне және контейнерлерге арналған браузерлерді қолдау
Сонымен, сіз не істеуіңіз керек? Бейнеге қосылу көптеген сайттар үшін опция емес, өйткені бейне көбірек әрі маңызды болып келеді. Көптеген сайттар бейнеге сәтті ауысты.
Осы мақаланың келесі беттерінде Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 және 4, iPhone және Android, Flash және Internet Explorer 7 және 8-де жұмыс істейтін веб-беттерге қалай бейне қосуға болады. Сондай-ақ қажет болса, басқа ескі браузерлерге қолдау көрсетуді қосу керек кілттер болады.
03 10
Бейнеңізді жасау және өңдеу
Веб-беттегі бейнеролик жасаған кезде сізге қажет нәрсе - бұл нақты бейне. Мүмкіндікті жасау үшін үздіксіз атып түсіруге және кейіннен түзетуге болады немесе оны сценарийге қоюға және оны алдын-ала жоспарлауға болады. Кез-келген жол жақсы жұмыс істейді, сіз өзіңізге ыңғайлы боласыз. Сіз қандай бейне түрін жасау керектігін білмесеңіз, осы идеяларды Үстелдің Бейнежазба нұсқаулығынан қараңыз:
- Отбасылық бейне жобалары
- Маркетинг және жарнамалық бейнелер
- Бейне виртуалды саяхат
- Қалай бейне
- Үйлену videos
Жоғары сапалы бейне жазу жолын біліңіз
Үйде және ауада қалай жазу керектігін, сондай-ақ аудио жазуды қалай білетініңізге көз жеткізіңіз. Жарықтандыру өте маңызды - көздеріне тым жарқын болатын жарақаттар, сондай-ақ қара қараңғы, қарапайым және кәсіптік емес көрінеді. Егер сіз өз сайтыңызда 30 секундтық бейнеге ие болғыңыз келсе де, жоғары сапа сіздің веб-сайтыңызда жақсы көрінеді.
Сондай-ақ, бейнеңізде қолданғыңыз келетін кез-келген дыбыстарды немесе музыканы (сонымен қатар, бейнефильмдерді) қолдануға болатынын есте сақтаңыз. Сізге ән жаза және ойната алатын досыңыздың қолы жетпейтін болса, онда фонда ойнайтын роялтизсіз музыка табу қажет. Сондай-ақ бейнелеріңізге қосу үшін бейнелерді орналастыруға болатын жерлер бар.
Бейнеңізді өңдеу
Сіз қолданатын редакторлық бағдарламалық жасақтаманың маңыздылығын білесіз, ол сіз оны жақсы білетін боласыз және оны тиімді пайдалануға болады. Gretchen, жұмыс үстелі бейне-нұсқаулығы бейнелерді өңдеулеріңізге көмектесетін кәсіби бейне-редакциялау кеңестеріне ие.
Бейнеңізді MOV немесе AVI (немесе MPG, CD, DV)
Осы оқу құралының қалған бөлігі үшін сіз сіздің бейнеңіз AVI немесе MOV сияқты жоғары сапалы (қысылмаған) кейбір форматта сақталған деп болжап отырмыз. Сіз бұл файлдарды өздеріңіз сияқты пайдалансаңыз да, сіз бұрын талқылаған бейнеге қатысты барлық мәселелерді шешесіз. Төмендегі беттерде файлды үш түрге қалай түрлендіру керектігі түсіндіріледі, сонда ол ең көп шолғыштармен көрінеді.
04 of 10
Бейнефильмді Firefox үшін Ogg-ге түрлендіру
Біз түрлендіретін бірінші формат Ogg (кейде Ogg-Theora деп аталады). Бұл формат Firefox 3.5, Opera 10.5 және Chrome 3-лердің барлығы.
Өкінішке орай, Ogg браузері қолдаса да, сіз сатып алатын көптеген белгілі бейне бағдарламалары (Adobe Media Encoder, QuickTime және т.с.с.) Ogg конверсия опциясын ұсынбайды. Осылайша, сіздің бейнеңізді Ogg-ке түрлендірудің жалғыз жолы - Интернеттегі түрлендіру бағдарламасын табу.
Түрлендіру параметрлері
Медиа-Конверт деп аталатын онлайн-құрал, бейнефильмнің (және дыбыстың) әртүрлі пішімдерін басқа бейне (және аудио) пішімдеріне түрлендіруге қатысты. Біз оны 3-секундтық тестілеу бейнебетінде көргенде, біз оны Mac-де жұмыс істей алмадық. Бірақ сізге жақсы сәттілік болуы мүмкін. Бұл сайт еркін болудың пайдасы бар.
Біз тапқан басқа да құралдар:
- Miro Video Converter (Windows Macintosh) - Бұл бағдарлама Ogg және MP4 (H.264) екеуіне де айналдырады және ол ашық дереккөз болып табылады.
- Koyote Video Converter (Windows)
- Тегін бейне конвертер Windows және Macintosh нұсқасы бар деп ойлаймыз, бірақ олардың сайтынан айту қиын болды
- Қарапайым Теора шифры (Macintosh) - бұл пайдаланатынымыз.
Сіздің бейнеңіз Ogg пішімінде сақталғаннан кейін, оны веб-сайтыңыздағы орынға сақтап, оны басқа браузерлер үшін басқа форматтарға түрлендіру үшін келесі бетке өтіңіз.
05 of 10
Бейнежазбаны Safari үшін MP4 файлына түрлендіру
Бейнеңізді келесі пішімге MP4 (H.264 бейне) түрлендіру қажет, сонда оны Safari 3 және 4-де, iPhone және Android-да ойнатуға болады. Сонымен қатар, H.264 бейнелерін Flash бағдарламасында көру үшін оңай FLV файлдарына түрлендіруге болады.
Бұл пішім коммерциялық өнімдерде оңай қол жетімді және сізге бейне өңдегішінің бар болса, MP4-ге түрлендіретін бағдарлама болған шығар. Adobe Premiere бар болса, Adobe Video Encoder бағдарламасын пайдалануға болады немесе QuickTime Pro жұмыс істейтін болса. Алдыңғы бетте талқылаған түрлендіргіштердің көбісі бейнефильмдерді MP4-ке түрлендіреді.
- Media-Convert - онлайн-құрал
- Miro Video Converter (Windows Macintosh) - Бұл бағдарлама Ogg және MP4 (H.264) екеуіне де айналдырады және ол ашық дереккөз болып табылады.
- SUPER (Windows) - көптеген файл түрлерін MP4 және FLV түрлендіреді
- Тегін бейне конвертер Windows және Macintosh нұсқасы бар деп ойлаймыз, бірақ олардың сайтынан айту қиын болды
Сіздің веб-сайтыңызға MP4 файлыңызды сақтаңыз, содан кейін оны Internet Explorer-ге пайдалану үшін Flash-ге түрлендіру қажет.
06-дан 10-ке дейін
Internet Explorer бағдарламасына бейне FLV түрлендіру
Бейнелерді FLV-ге түрлендірудің ең оңай жолы - Flash-ды қолдану. Міне, менің бейнелерімді Flashке түрлендіреміз. Бірақ егер Flash жоқ болса, мұнда FLV файлдарын түрлендіруге арналған екі танымал құрал:
- SUPER (Windows) - көптеген файл түрлерін MP4 және FLV түрлендіреді
- ffmpegX (Macintosh) - көптеген түрлі файл түрлерін Mp4 және FLV түрлендіреді.
Сіздің FLV файлыңызды веб-сайтыңызға сақтаңыз және келесі бетте сіз өзіңіздің бейнелеріңізді ойната алу үшін HTML-ды қалай жазу керектігін көрсетесіз.
07 ішіндегі 10
Бейне элементтерін веб-бетке қосыңыз
Веб-беттерге бейне қосу үшін HTML 5-ні пайдалану өте оңай. Қазіргі заманғы браузерлердің көпшілігі HTML 5 бейнесін қолдайды, бірақ олар оны бірдей түрде қолдамайды. Бірақ бұл бейнеңізді Ogg және MP4 пішімдері ретінде сақтасаңыз, қазіргі заманғы браузерлерде (Internet Explorer 8-тен басқа) көрсету үшін тек 4-5 жолды жаза аласыз. Мұнда келесідей:
- Браузерлер HTML 5 күтуді білетін етіп HTML 5 doctype маркерін жазыңыз:
- Веб-бетті сіз әдетте жасағандай жасаңыз:
<басы>
title>
head>
body>
html> - Дене ішінде
- Бейнеңізде қандай атрибуттар болуын шешіңіз:
- autoplay - жүктелгеннен кейін бастау үшін
- басқару элементтері - оқырмандарға бейнені басқаруға мүмкіндік береді (кідірту, артқа айналдыру, жылдам алға айналдыру)
- цикл - бейне аяқталғанда басынан бастау
- алдын-ала жүктеу - бейнеклипті жүктеуді алдын ала жүктеңіз, сонда клиент оны басқанда тезірек дайын болады
- постер - бейне тоқтатылған кезде қолданғыңыз келетін кескінді анықтаңыз
<бейне бақылауы алдын-ала жүктеу> video>
- Содан кейін бейнеңіздің екі нұсқасы үшін (MP4 және OGG) бастапқы файлдарды
элементінің ішіне қосыңыз: <бейне бақылауы алдын ала жүктеу>
- Chrome 1, Firefox 3.5, Opera 10 және / немесе Safari 4 ішіндегі бетті ашып, дұрыс көрсетілетініне көз жеткізіңіз. Сіз оны кем дегенде Firefox 3.5 және Safari 4-де сынап көруіңіз керек, себебі олар әр түрлі кодектерді пайдаланады.
Міне бітті. Сізде осы кодты қолданғаннан кейін Firefox 3.5, Safari 4, Opera 10 және Chrome 1-де жұмыс істейтін бейне аласыз. Бірақ Internet Explorer туралы не деуге болады?
Internet Explorer HTML 5 немесе Tag сияқты емес
Келесі бөлімде IE 8-ді HTML5-тің 5-бейне тегтерімен жақсы ойнап, бейнені бейнелеу үшін не істеуге болатынын талқылаймыз. Флэшті пайдалану керек. Жақсы жаңалық мынада, IE 9 HTML 5 және бейне тегті қолдайды.
08-тен 10-ға дейін
Internet Explorer бағдарламасын жұмысқа алу үшін JavaScript және Flash Player қосыңыз
Алдыңғы беттегі HTML-де FLV файлы үшін бастапқы жол жоқ екенін байқаған боларсыз. Егер сіз бұл бетті Internet Explorer-де тексерсеңіз, ол жұмыс істемейді. Өйткені, Internet Explorer HTML 5-ні танымайды және OGG немесе MP4 бейнелерін түпнұсқалық түрде ойната алмайды. Internet Explorer 7 және 8-ні жұмыс істеу үшін алу үшін оны бейнеге Flash ретінде ойнату қажет. Бірақ FLV файлын қосудан гөрі, оны жұмысқа алу үшін көп қадамдар бар.
1-қадам: Веб-сайтыңыз үшін Flash бейне ойнатқышын алыңыз
Біз FlowPlayer-ді алуды ұсынамыз, себебі ол ашық веб-сайтқа орнатылатын Flash ойнатқышы болып табылады және ойнатылатын Flash бейне болған кезде пайдалануға болады. FlowPlayer тегін нұсқасы бейнелеріңізге жарнаманы енгізеді, бірақ қажет болса, коммерциялық лицензияларды сатып алуға болады.
FlowPlayer сайтын орнату үшін FlowPlayer сайтындағы нұсқауларды орындаңыз. Қысқаша айтқанда, сіз сайтта 2 SWF файлын және JavaScript файлын орнатасыз. HTML-тің төменгі жағында ( body> тегіне дейін) жолды қосасыз: