Դաս 20: Վիդեո և աուդիո

0

HTML5-ը ընդգրկում է նաև մեդիա տարրերը։ Ուստի այս դասընթացում կներկայացնենք, թե ինչպես օգտագործել վիդեոն և աուդիոն։

Video

Մենք բոլորս սովոր ենք օգտագործել YouTube-ը կամ Vimeo-ն (և այլն) մեր կայքում տեսանյութեր տեղադրելու համար, քանի որ գոյություն չունի մի ընդհանուր video player, որը բոլոր մարդիկ կարողանան օգտագործել։ Օրինակ plug-in-ը՝ ինչպես Flash-ը, պետք է ինսթալ անել (ճիշտ տարբերակով), բացի այդ հնարավոր է, որ հանդիպեք որոշ լուրջ խնդիրների ինչպես հարմարավետությունը և թողունակությունը։

HTML5 ներկայացրել է նոր <video> էլեմենտը, ինչը նշանակում է, որ այլևս անհրաժեշտ չէ YouTube-ը կամ այլ plug-in-ներ!

Զգուշացում: Սա չի համապատասխանում բոլոր բրաուզերներին՝ Internet Explorer 9+ պահանջում է Microsoft Media Player, իսկ Safari-ն՝ QuickTime։

Ինտերնետային էջում տեսանյութ ավելացնելու կոդը բավականին պարզ է՝

        <video width=”320″ height=”240″ controls>

          <source src=”movie.mp4″ type=”video/mp4″>

        </video>

height և width-ը մատնանշում են բրաուզերին, թե որքան տարածություն է անհրաժեշտ տեսանյութը ցուցադրելու համար: controls արտիբուտը ավելացնում է Play/Pause կոճակները: src –ն պետք է մատնանշի ձեր ֆիլմի գտնվելու վայրը (մի մոռացեք վերբեռնել այդ ֆայլը, երբ տեղափոխեք ֆայլերը դեպի ինտերնետ օգտագործելով FTP-ն)։

Գոյություն ունեն տեսանյութերի երեք տեսակ՝ MP4, WebM և Ogg։ Նշվածներից ոչ մեկը չի աջակցվում բոլոր բրաուզերների կողմից։ MP4 ձևաչափը չի աջակցվում FireFox 3.6+ կամ Օպերայի 10.6+ կողմից: Ogg-ն աշխատում է այդ բրաուզերների հետ, բայց ոչ Internet Explorer 9+ կամ Safari 5+:

MP4 և OGG աղբյուրները ՝

        <video width=”320″ height=”240″ controls>

          <source src=”movie.mp4″ type=”video/mp4″>

          <source src=”movie.ogg” type=”video/ogg”>

        </video>

1

Տեղադրելով տեքստը վիդեո տարրի ներսում կհանգեցնի այն իրավիճակին, որ բրաուզերը ինչ-ինչ պատճառներով պարզապես չի աջակցի տեսանյութը։

Եթե  ունեք տեսանյութ փորձեք ինքներդ։

Նշում: Այս կոդը  կաշխատի միայն այն դեպքում, եթե ինտերնետում եք։ Եթե ձեր էջը դեռևս local է, ապա փորձեք մեկ ուրիշ ձև:

 Local ֆիլմ երբ էջը նույնպես local է`

 <input type=”file” accept=”video”/>

<video controls autoplay></video>

 Այս կոդը թույլ է տալիս Ձեզ ընտրել տեսանյութ ձեր կոշտ սկավառակից։ Հիշեք, որ այն օգտագործման համար չէ, երբ Ձեր կայքը աշխատում է Ինտերնետում:

 Audio

Ինչպես վիդեոն, աուդիո ֆայլերը չունեն ստանդարտ ճանապարհը նվագելու առանց plug-in օգտագործելու։

Այժմ HTML5-ը ունի <audio> էլեմենտ, որը կարող եք օգտագործել plug-in–ի փոխարեն: Դուք կարող եք օգտվել MP3, WAV և OGG ձևաչափերից։ Սակայն ինչպես վիդեոն ոչ բոլորն են աջակցվում է յուրաքանչյուր բրաուզերի կողմից։ Օգտագործեք WAV + MP3։

 Music

        <audio controls>

          <source src=”music.wav” type=”audio/wav”>

          <source src=”music.mp3″ type=”audio/mpeg”>

          Your browser does not support the audio element.

        </audio>

2

Controls ատրիբուտը ավելացնում է play/pause –ը: Ինչպես video-ի դեպքում, այստեղ նույնպես կարող եք ավելացնել մի քանի ձևաչափեր և բրաուզերը կխաղա առաջինը, որը համատեղելի է:

Չնայած նրան, որ մենք ներկայացրեցինք աուդիոյի և վիդեոյի հիմունքները, կան շատ հարցեր, որտեղ հնարավոր է սխալվեք։ Եթե հանդիպեք դժվարություններ օգտագվեք troubleshoot-ի ֆորումներից։

Հարգելի ընթերցող, խնդրում ենք չմոռանալ like տալ մեր ֆեյսբուքյան էջին, քանի որ նորությունների մեծ մասը առաջինը տեղադրվում է հենց այնտեղ։ Ինչպես նաև հետևեք մեզ այլ սոցիալական ցանցերում և, իհարկե, գրանցվեք մեր բլոգում։

Share.