HTML 5 տեսահոլովակը հեշտացնում է վիդեոներ ավելացնել ձեր վեբ էջերում : Բայց մինչ մակերեւույթը հեշտ է լինում, կան շատ բաներ, որոնք դուք պետք է անեք, որպեսզի ձեր տեսանյութը հասանելի դառնա: Այս ձեռնարկը ձեզ կտանի HTML 5-ում էջ ստեղծելու քայլեր, որոնք վիդեո կգործեն բոլոր ժամանակակից բրաուզերում:
- Hosting ձեր սեփական HTML 5 Video ընդդեմ օգտագործելով YouTube- ը
- Վիդեո օժանդակության արագ ակնարկ համացանցում
- Ստեղծեք եւ խմբեք ձեր տեսանյութը
- Փոխարկել տեսանյութը Ogg- ի համար Firefox- ի համար
- Տեսանյութը MP4- ին Safari- ի համար փոխարկել
- Փոխարկել տեսանյութը FLV- ի համար Internet Explorer- ի համար
- Ավելացնել վիդեո տարրը ձեր վեբ էջին
- Ավելացրեք JavaScript եւ Flash Player- ը Internet Explorer- ի համար աշխատելու համար
- Ինչպես կարող եք ստուգել շատ բրաուզերներում
01-ից 10-ը
Hosting ձեր սեփական HTML 5 Video ընդդեմ օգտագործելով YouTube- ը
YouTube- ը հիանալի կայք է: Այն հեշտացնում է վեբ էջեր արագ ներդնել վեբ էջերում , եւ որոշ աննշան բացառություններով այդ տեսանյութերի կատարման մեջ բավականին փխրուն է: Եթե դուք YouTube- ում տեսանյութ կներկայացնեք, կարող եք վստահ լինել, որ որեւէ մեկը կկարողանա դիտել այն:
Սակայն YouTube- ի օգտագործման համար, ձեր տեսանյութերը տեղադրելու որոշ վերլուծություններ կան
YouTube- ի խնդիրների մեծ մասը գտնվում է սպառողական կողմում, այլ ոչ թե դիզայներական կողմում, ինչպիսինն է:
- Դանդաղ որոնում եւ ինդեքսավորում
- Սերվերի հեռացումները
- Բովանդակությունը հեռացվում է (կարծես թե) կամայականորեն
- Շատ վատ բովանդակություն
Սակայն կան որոշ պատճառներ, որոնց պատճառով YouTube- ը վատ է բովանդակության մշակողների համար, այդ թվում `
- 10 րոպե առավելագույն երկարություն տեսանյութերի համար (անվճար հաշիվների համար)
- Վատ վերբեռնման կատարում
- YouTube- ը ձեռք է բերում անսահմանափակ օգտագործման իրավունքներ ձեր տեսանյութին
- Ցանկացած YouTube օգտագործողը ձեր տեսանյութի համար անսահմանափակ օգտագործման իրավունք է ստանում
HTML 5 Video- ն որոշ առավելություններ է տալիս YouTube- ում
Տեսանյութի համար HTML 5-ի օգտագործումը թույլ կտա վերահսկել ձեր տեսանյութի բոլոր ոլորտները, որոնցից ով կարող է դիտել այն, թե որքան է այն, ինչ պարունակությունը, որտեղ այն հյուրընկալվում է եւ ինչպես է կատարվում սերվերը: Եվ HTML 5-ի տեսանյութը հնարավորություն է տալիս ձեր տեսանյութը կոդավորելու այնքան ձեւաչափերով, որքան անհրաժեշտ է համոզվել, որ առավելագույն թվով մարդիկ կարող են դիտել այն: Ձեր հաճախորդները կարիք չունեն plugin կամ սպասել, մինչեւ YouTube- ը թողարկի նոր տարբերակ:
Իհարկե, HTML 5 Video- ն առաջարկում է որոշ թերություններ
Դրանք ներառում են.
- Դուք պետք է ձեր տեսանյութը կոդավորեք առնվազն երեք տարբեր կոդեկներում
- Դուք պետք է մի քանի JavaScript ներառեք, որպեսզի ապահովեք բրաուզերները, որոնք չեն աջակցում HTML 5- ը
- Ձեր սերվերը պետք է կարողանա կարգավորել հոսթինգի տեսանյութերի թողունակության պահանջները
02-ից 10-ը
Վիդեո օժանդակության արագ ակնարկ համացանցում
Վիդեո վիդեո վիդեո վիդեո վիդեո վիդեո վիդեո Կան շատ բաներ, որոնք կարող էին սխալ լինել.
- Նախ, ձեր
- Այսպիսով, անցնում եք
- Այնուհետեւ կարծում եք, « Flash !» Եվ ձեր տեսանյութը կոդավորեք որպես FLV ֆայլ: Բայց Flash- ը շատ բջջային սարքերի վրա չի աջակցվում, եւ շատերն ատում են Ֆլեշը `անկախ նրանից, թե ինչպես է այն օգտագործվում (հարցման մասնակիցների 25% -ը հարցնում է, թե ինչպես եք զգում Flash- ի մասին, հայտարարել է, որ նրանք չեն կարող կանգնել Flash- ին որեւէ ձեւով):
- Այսպիսով, որոշեք ձեր տեսանյութը վերբեռնել YouTube- ի նման վիդեո ներկառուցված կայքի, բայց հետո դուք ունեք քննարկումներ YouTube- ի հետ:
- Վերջապես, որոշեք անցնել HTML 5-ի հետ, բայց Internet Explorer- ը չի աջակցում այն (մինչեւ Internet Explorer 9-ը): Եվ նույնիսկ եթե դուք անում եք, կան երկու տեսահոլովակները, որոնք աջակցվում են եւ միայն մեկ զննարկիչ, որը կարող է օգտագործվել: Բրաուզերի օժանդակությունը Video Codecs եւ Containers- ի համար
Այսպիսով, ինչ պետք է անեք: Տեսահոլովակն այլեւս այլընտրանքային տարբերակ չէ, քանի որ տեսանյութը դառնում է ավելի ու ավելի կարեւոր: Եվ շատ կայքեր հաջողությամբ անցել են տեսանյութ:
Այս հոդվածի հաջորդ էջերը կուղղորդեն ձեզ, թե ինչպես ավելացնել վիդեո ձեր վեբ էջեր, որոնք աշխատում են Firefox 3.5, Opera 10.5, Chrome 3.0, Safari 3 եւ 4, iPhone եւ Android, Flash եւ Internet Explorer 7 եւ 8: ինչպես նաեւ անհրաժեշտ է անհրաժեշտության դեպքում ավելորդ բրաուզերների համար աջակցություն ցուցաբերելու համար:
03-ից 10-ը
Ստեղծեք եւ խմբեք ձեր տեսանյութը
Առաջին էջը, երբ դուք պետք է վիդեո վիդեո վիդեո տեղադրելիս, այն իրական տեսանյութն է: Դուք կարող եք կամ նկարահանել անընդհատ եւ խմբագրել հետագայում ստեղծելու մի առանձնահատկություն, կամ դուք կարող եք այն սցենարել եւ պլանավորել այն ժամանակից շուտ: Կամ ճանապարհը լավ է աշխատում, պարզապես այն, ինչ ձեզ հարմար է: Եթե չգիտեք, թե ինչ տեսակի տեսանյութ պետք է կատարեք, ստուգեք այս գաղափարները Desktop Video Guide- ից:
- Ընտանեկան վիդեո ծրագրեր
- Մարկետինգ եւ գովազդային վիդեոներ
- Video Վիրտուալ շրջագայություններ
- Ինչպես տեսանյութեր
- Հարսանեկան տեսանյութեր
Իմացեք, թե ինչպես արձանագրել բարձրորակ տեսանյութ
Համոզվեք, որ դուք գիտեք, թե ինչպես գրանցել ներսում եւ դրսում, ինչպես նաեւ ձայնագրելու աուդիո: Լուսավորությունը նույնպես շատ կարեւոր է. Կրակոցները, որոնք շատ վառ են վնասում աչքերը, եւ չափազանց մութ են պարզապես նիհար եւ անհասկանալի: Նույնիսկ եթե դուք միայն պլանավորում եք ունենալ 30 վայրկյանով վիդեո ձեր կայքում, ապա ավելի բարձր որակը ավելի լավ է արտացոլելու ձեր կայքում:
Հիշեք նաեւ, որ հեղինակային իրավունքը կիրառվում է ցանկացած հնչյունների կամ երաժշտության (ինչպես նաեւ ֆոտո տեսանյութ), որոնք դուք կարող եք օգտագործել ձեր տեսանյութում: Եթե դուք չունեք ձեր ընկերոջը, որը կարող է գրել եւ երգել երգը ձեզ համար, ապա ձեզ հարկավոր է ֆիլմում նվագարկիչով գտնել երաժշտություն: Կան նաեւ վայրեր, որտեղ դուք կարող եք ֆոտո տեսանյութեր ավելացնել ձեր տեսանյութերը:
Ձեր տեսանյութը խմբագրում
Կարեւոր չէ, թե ինչ եք օգտագործում խմբագրման ծրագիրը, այնքան ժամանակ, քանի դեռ դուք ծանոթ եք դրա հետ եւ կարող եք այն արդյունավետ օգտագործել: Gretchen- ը, Desktop Video Guide- ն ունի որոշ մասնագիտական տեսանյութերի խմբագրման խորհուրդներ, որոնք կարող են օգնել ձեզ խմբագրել ձեր տեսանյութերը, որպեսզի նրանք լավ տեսնեն:
Պահեք ձեր տեսանյութը MOV կամ AVI (կամ MPG, CD, DV)
Մնացած այս դասընթացի համար մենք պատրաստվում ենք ենթադրել, որ ձեր տեսանյութը պահպանվել է AVI կամ MOV- ի բարձր որակի (ոչ սեղմված) ձեւաչափով: Թեեւ դուք կարող եք օգտագործել այդ ֆայլերը, քանի որ նրանք, ինչպես դուք եք, վազում եք այն բոլոր տեսանյութերի հետ, որոնք մենք արդեն քննարկել ենք: Հաջորդ էջերը կբացատրեն, թե ինչպես փոխել ձեր ֆայլը երեք տեսակի, այնպես, որ այն դիտելի է առավելագույն թվով բրաուզերների կողմից:
04-ից 10-ը
Փոխարկել տեսանյութը Ogg- ի համար Firefox- ի համար
Առաջին ձեւաչափը, որը մենք կփոխանցենք, Ogg- ն (երբեմն կոչվում է Ogg-Theora): Այս ձեւաչափն այն է, որ Firefox 3.5, Opera 10.5 եւ Chrome 3-ը կարող են բոլոր դիտել:
Ցավոք, Ogg- ն ունի բրաուզերի օժանդակություն, մինչդեռ շատ հայտնի վիդեո ծրագրեր, որոնք կարող եք ձեռք բերել (Adobe Media Encoder, QuickTime եւ այլն), չեն առաջարկում Ogg- ի փոխարկման տարբերակ: Այսպիսով, ձեր տեսանյութը Ogg- ին փոխելու միակ միջոցը համացանցում փոխակերպման ծրագիր է:
Փոխարկման ընտրանքները
Կա ինտերնետային գործիք, որը կոչվում է Media-Convert, որը պնդում է, որ տեսանյութի տարբեր ձեւաչափեր (եւ աուդիո) փոխարկել այլ տեսանյութ (եւ աուդիո) ձեւաչափերով: Երբ փորձեցինք այն 3-րդ փորձարկման տեսանյութով, մենք չկարողացանք այն աշխատել իմ Mac- ի վրա: Բայց դուք կարող եք ավելի լավ հաջողություն ունենալ: Այս կայքը ունի անվճար լինելու ազատություն:
Որոշ այլ գործիքներ, որոնք մենք գտել ենք, ներառում են.
- Miro Video Converter- ը (Windows Macintosh) - Այս ծրագիրը ունի Ogg- ի եւ MP4- ի (H.264) փոխարկումը եւ բաց աղբյուրը:
- Koyote Video Converter (Windows)
- Ազատ Video Converter Մենք կարծում ենք, որ դա ունի Windows եւ Macintosh տարբերակ, սակայն դժվար է ասել իրենց կայքում
- Պարզ Թորան Encoder (Macintosh) - սա այն է, որ մենք հակված ենք օգտագործել:
Ogg ֆորմատով ձեր տեսանյութը պահելու դեպքում, այն պահեք այն ձեր գտնվելու վայրում եւ գնեք հաջորդ էջ, այն այլ ձեւաչափերով փոխանակելու համար, այլ բրաուզերների համար:
05-ից 10-ը
Տեսանյութը MP4- ին Safari- ի համար փոխարկել
Հաջորդ ձեւաչափը, որը դուք պետք է փոխեք ձեր տեսանյութը, MP4 (H.264 տեսանյութ) է, այնպես, որ այն կարող է խաղարկվել Safari 3 եւ 4-ում եւ iPhone- ում եւ Android- ում: Plus, H.264 տեսանյութերը կարող են հեշտությամբ փոխարկվել 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- ի համար
- Ազատ Video Converter Մենք կարծում ենք, որ դա ունի Windows եւ Macintosh տարբերակ, սակայն դժվար է ասել իրենց կայքում
Փրկեք ձեր MP4 ֆայլը ձեր կայքում, եւ ապա ձեզ հարկավոր է այն փոխանակել Flash- ի համար Internet Explorer- ի համար:
06-ից 10-ը
Փոխարկել տեսանյութը FLV- ի համար Internet Explorer- ի համար
FLV- ի տեսանյութերի փոխակերպման ամենահեշտ ձեւն այն է, օգտագործել Flash- ը: Այսպիսով, մենք իմ տեսանյութերը վերափոխելու ենք Flash: Բայց եթե դուք չունեք Ֆլեշ, այստեղ երկու հայտնի գործիքներ FLV ֆայլեր փոխանակելու համար.
- SUPER (Windows) - շատ տարբեր ֆայլերի տեսակներ կփոխանակեն MP4- ի եւ FLV- ի համար
- ffmpegX (Macintosh) - շատ տարբեր ֆայլերի տեսակներ փոխանակելու Mp4 եւ FLV- ին:
Ձեր FLV ֆայլը ձեր կայքում պահեք եւ հաջորդ էջը ցույց կտա, թե ինչպես պետք է գրել HTML- ը, որպեսզի դուք կարողանաք խաղալ ձեր տեսանյութերը:
07-ից 10-ը
Ավելացնել վիդեո տարրը ձեր վեբ էջին
HTML- ի 5-ը շատ հեշտ է վեբ էջեր վիդեոներ ավելացնել: Ժամանակակից բրաուզերների մեծ մասը աջակցում է HTML5 տեսանյութը, չնայած նրանք բոլորն էլ չեն աջակցում այն նույն կերպ: Բայց սա նշանակում է, որ եթե ձեր տեսանյութը պահեք որպես Ogg եւ MP4 ձեւաչափեր, դուք կկարողանաք գրել միայն չորս կամ հինգ տող HTML, որպեսզի այն ցուցադրվի ժամանակակից բրաուզերներում (բացի Internet Explorer 8-ից): Ահա թե ինչպես:
- Գրեք HTML 5 doctype նշիչը, որպեսզի բրաուզերները իմանան, թե HTML 5:
- Ստեղծեք ձեր վեբ էջը, ինչպես սովորաբար ստեղծեք այն:
<ղեկավար>
title>
head>
body>
html> - Մարմնի ներսում տեղադրել
- Որոշեք, թե ինչպիսի հատկանիշներ եք ցանկանում ձեր տեսանյութը ունենալ:
- autoplay - սկսելու համար այն բանից հետո, երբ այն ներբեռնվել է
- վերահսկում - թույլ տալ ձեր ընթերցողներին վերահսկել տեսանյութը (դադար, շտկել, արագ առաջ)
- հանգույց - սկսել տեսանյութը սկզբից, երբ ավարտվում է
- preload - նախնական ներբեռնեք տեսանյութը, որպեսզի այն պատրաստ լինի ավելի արագ, երբ հաճախորդը սեղմում է դրա վրա
- պաստառ - սահմանեք պատկերը, որը ցանկանում եք օգտագործել, երբ տեսանյութը դադարում է
<տեսահսկման նախադիտում> 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- ը չի սիրում HTML5 կամ Tag
Հաջորդ բաժնում մենք կխոսենք այն մասին, թե ինչ կարող ես անել, որպեսզի IE 8- ը լավ խաղա HTML 5 տեսագրության հետ եւ տեսանյութ կցուցադրի: Դուք պետք է օգտագործեք Flash- ը: Լավ նորությունն այն է, որ IE 9-ը կպահպանի HTML5- ը եւ տեսահոլովակը:
08-ից 10-ը
Ավելացրեք JavaScript եւ Flash Player- ը Internet Explorer- ի աշխատելու համար
Կարող եք նկատել, որ նախորդ էջի HTML- ում FLV ֆայլի համար չկա աղբյուրի գիծ: Եվ եթե դուք փորձեք այդ էջը Internet Explorer- ում, ապա դա չի աշխատի: Դա այն է, որ Internet Explorer- ը չի ճանաչում HTML 5-ը, եւ այն չի կարող խաղալ Native OGG կամ MP4- ի տեսանյութեր: Որպեսզի Internet Explorer 7-ը եւ 8-ը աշխատեն, դուք պետք է այն տեսանյութը տեսնեք Flash- ում: Բայց կան ավելի շատ քայլեր այն աշխատելու համար, քան պարզապես ավելացնել FLV ֆայլը:
Քայլ 1: Ստացեք Flash Video Player- ի Ձեր կայքը
Մենք խորհուրդ ենք տալիս ստանալ FlowPlayer- ը, քանի որ այն բաց կոդով Flash վիդեո նվագարկիչ է, որը դուք կարող եք տեղադրել ձեր վեբ սերվերի վրա եւ օգտագործել այն ժամանակ, երբ ունեք Flash տեսանյութ: FlowPlayer- ի անվճար տարբերակը ձեր տեսանյութերի գովազդում է, սակայն կարող եք նաեւ գնել առեւտրային լիցենզիաներ, եթե դրանք անհրաժեշտ են:
Հետեւեք FlowPlayer կայքում տեղադրվող հրահանգներին, FlowPlayer- ին ձեր կայքում տեղադրելու համար: Կարճ ասած, դուք պետք է տեղադրեք 2 SWF ֆայլ եւ JavaScript- ի ֆայլ ձեր կայքում: Ձեր HTML- ի ներքեւում ( body> tag- ից առաջ) կցեք մի գիծ: