HTML 5 видео таг нь веб хуудсуудаа видеог нэмэхэд хялбар болгодог. Гэхдээ энэ нь гадаргуу дээр хялбархан харагдаж байх үед таны видео бичлэгийг дээшлүүлэх, ажиллуулахын тулд хийх ёстой олон зүйлүүд байна. Энэхүү заавар нь HTML 5-ыг вэб хуудас үүсгэхийн тулд алхам алхмаар дамжуулан орчин үеийн бүх хөтөч дээр видео ажиллуулах болно.
- YouTube-ийг ашиглахын тулд өөрийн HTML 5 видео бичлэг хийх
- Вэб дээрх видео дэмжлэгийн товч тойм
- Өөрийн Видеог үүсгэх болон засах боломжтой
- Видеог Ogg-г Firefox ашиглан хөрвүүлэх
- Видеог Safari-д MP4 болгож хувиргана
- Видео хөрвүүлэгчийг FLV руу хөрвүүлэх
- Видео Элементийг Таны Вэб хуудсанд нэмнэ үү
- Internet Explorer-г ажиллуулахын тулд JavaScript ба Flash Player нэмнэ үү
- Та чадах олон вэб хөтчийг шалгаарай
01-ийн 10
YouTube-ийг ашиглахын тулд өөрийн HTML 5 видео бичлэг хийх
YouTube бол гайхалтай сайт юм. Энэ нь Вэб хуудсанд видеог шууд оруулахад хялбар болгодог бөгөөд зарим нэг үл хамаарах зүйлүүд нь эдгээр видеог гүйцэлдүүлэхэд нэлээн харагдана. Хэрэв та YouTube дээр видеог байршуулсан бол хэн ч үүнийг үзэх боломжтой гэдэгт итгэлтэй байж болно.
Гэхдээ YouTube-г ашиглах нь таны видеонуудыг ашиглах нь зарим нэг сул тал байдаг
YouTube-тэй холбоотой ихэнх асуудлууд нь хэрэглэгчийн тал дээр дизайнер талаасаа бус харин дараах зүйлсийг хийх болно:
- Хайлт ба индексийг удаашруулах
- Серверийн тасалдал
- Контентыг хассан (дуртай) дуртай
- Хэт их муу агуулгатай
Гэхдээ агуулга хөгжүүлэгчдийн хувьд YouTube-ийн хувьд муу байгаа шалтгаануудын заримыг дурдвал:
- Видеог 10 минутын хамгийн их урт (үнэгүй акаунтаар)
- Байршуулах гүйцэтгэл муу байна
- YouTube таны видеонд хязгааргүй ашиглалтын эрхийг олж авдаг
- YouTube-ийн хэрэглэгчид таны видеондоо хязгааргүй ашиглалтын эрх олж авдаг
HTML 5 Видео нь YouTube дээр давуу тал олгодог
Видео HTML 5- ийг ашиглах нь таны видеоны бүх талыг хэн хянах вэ, хэн үүнийг үзэж болох, хэдий хэр хугацаа, агуулгын агуулга, хаана байрлаж байгаа, сервер хэрхэн гүйцэтгэж байгааг хянах боломжийг олгоно. Мөн HTML 5 видео танд хамгийн олон тооны хүмүүс үүнийг үзэж чадаж байгаа эсэхийг шалгаж байхын тулд таны видеог кодчилох боломжийг олгодог. Таны хэрэглэгчид залгаасын шаардлагагүй эсвэл YouTube-ийн шинэ хувилбар гарах хүртэл хүлээх шаардлагагүй.
Курс эхлэн, HTML 5 видеонууд зарим сул талуудыг санал болгодог
Үүнд:
- Та өөрийн видеог хамгийн багадаа гурван янзын кодчилолд кодчилох хэрэгтэй
- HTML 5 ажиллахгүй байгаа хөтчүүдийг шалгахын тулд зарим нэг JavaScript-г оруулах хэрэгтэй
- Таны сервер видеог байршуулах зурвасын өргөнийг зохицуулах чадвартай байх ёстой
10 дахь нь
Вэб дээрх видео дэмжлэгийн товч тойм
Вэб хуудсанд видеог нэмж оруулснаар удаан хугацаагаар хэцүү байсан. Маш олон зүйл буруугаар эргэвэл:
- Эхлээд та
- Тиймээс та
- Дараа нь та " Flash !" Гэж боддог. Мөн таны видео бичлэгийг FLV файл болгон кодчил. Гэсэн хэдий ч Flash олон гар утасны төхөөрөмж дээр дэмжигддэггүй бөгөөд олон хүн Flash-ийг хэрхэн ашиглаж байгаад дургүй байдаг. (25% нь Флэшийн талаар юу мэдэрч байгаагаа асуусан хүмүүсийн асуусан асуултад хариулсан).
- Тэгэхээр та видеог YouTube гэх мэт видеог оруулаад байршуулахаар шийдсэн боловч та бидний ярилцсан YouTube-тай холбоотой асуудлууд байна.
- Эцэст нь хэлэхэд та HTML 5-ыг ашиглахыг шийддэг боловч Интернэт 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
Өөрийн Видеог үүсгэх болон засах боломжтой
Вэб хуудсанд видеог тавихад хэрэгтэй хамгийн эхний зүйл бол жинхэнэ видео юм. Та тасралтгүйгээр гөлөгж, дараа нь засварлах боломжтой, эсвэл скриптийг урьдчилан боловсруулж болно. Аль ч аргаар сайн ажиллана, энэ нь таны тав тухтай байгаа зүйл юм. Хэрэв та ямар төрлийн видео хийхээ мэдэхгүй байгаа бол эдгээр санааг Ширээний видео гарын авлагаас шалгаарай:
- Гэр бүлийн видео сангууд
- Маркетинг ба сурталчилгааны видео бичлэгүүд
- Видео виртуал аялалууд
- Видео бичлэгүүд
- Хуримын видео
Өндөр чанартай видеонуудыг хэрхэн бүртгэхийг сурах
Дотор болон гадаа бичлэг, хэрхэн аудио бичлэг хийх талаар мэдэх хэрэгтэй. Гэрэлтүүлэг нь мөн маш чухал - нүдэнд нь хэтэрхий хурц хараатай зургууд, харанхуй нь шаварлаг, мэргэжлийн бус харагдана. Хэдийгээр та зөвхөн 30 секундын видеогоо вэбсайтад байрлуулахаар төлөвлөж байгаа ч өндөр чанар нь таны вэбсайт дээр илүү сайн байх болно.
Зохиогчийн эрхийг зохиогчийн эрхийг хамгаалахын тулд та өөрийн видеонд ашиглахыг хүсч болох дуу чимээ, хөгжим (түүнчлэн хувьцааны бичлэг) -д хамаарна гэдгийг санаарай. Хэрвээ танд зориулж дуу бичих, тоглуулах боломжтой найздаа хандах боломжгүй бол та ашигт малтмалын нөөц ашигласны төлбөргүй хөгжим тоглохыг хайж олох хэрэгтэй болно. Мөн та видео бичлэгээ нэмэхийн тулд бичлэг хийх боломжтой газар байдаг.
Таны видеог засах
Таны хэрэглэж буй засварлах программ аль нь ч хамаагүй, та үүнийг мэддэг болохоор үүнийг үр дүнтэй ашиглах боломжтой. Gretchen, Ширээний видеоны гарын авлага нь зарим видеонуудаар засах зөвлөмжүүд байдаг бөгөөд тэдгээр нь таны видеог засварлахад тус болохуйц сайхан харагдаж байна.
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-д хөрвүүлэх цорын ганц арга бол Вэб дээр хөрвүүлэх програм олох явдал юм.
Хөрвүүлэх сонголтууд
Медиа-Конверт хэмээх онлайн хэрэгсэл нь видеоны (болон аудио) янз бүрийн форматыг бусад видео (болон аудио) формат руу хөрвүүлэхийг шаарддаг. Бид 3 секундын туршид туршиж үзсэнийхээ дараагаар Mac дээрээ ажиллах боломжгүй болсон. Гэхдээ та илүү амжилт хүсье. Энэ сайт үнэгүй байхын ач тустай.
Бидний олсон бусад зарим хэрэгсэлд:
- Miro Video Converter (Windows Macintosh) - Энэ програм нь Ogg болон MP4 (H.264) хоёулан дээр хөрвүүлэх ач холбогдолтой бөгөөд нээлттэй эх код юм.
- Koyote Video Converter (Windows)
- Чөлөөт Видео Хөрвүүлэгч Бид үүнийг Windows болон Macintosh аль аль нь байдаг гэж бодож байна, гэхдээ энэ нь тэдний сайтаас хэлэх нь хэцүү юм
- Энгийн Theora Encoder (Macintosh) - энэ бол бидний хэрэглэдэг хандлага юм.
Та видеог Ogg форматаар хадгалсаны дараа вэбсайт дээрх байршилд хадгалаад дараа нь бусад хөтчүүдэд зориулж өөр форматтай хөрвүүлэх боломжтой.
05-р сарын 10
Видеог Safari-д MP4 болгож хувиргана
Таны видеог хөрвүүлэх дараагийн формат нь 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 зэрэг олон төрлийн файлын төрлийг хөрвүүлнэ
- Чөлөөт Видео Хөрвүүлэгч Бид үүнийг Windows болон Macintosh аль аль нь байдаг гэж бодож байна, гэхдээ энэ нь тэдний сайтаас хэлэх нь хэцүү юм
MP4 файлаа вэбсайтдаа хадгалаад дараа нь үүнийг Internet Explorer-ийн Flash-рүү хөрвүүлэх хэрэгтэй болно.
06-ийн 10
Видео хөрвүүлэгчийг FLV руу хөрвүүлэх
FLV-д видео хөрвүүлэх хамгийн хялбар арга нь Flash өөрөө ашиглах явдал юм. Ингэхлээр бид видеогоо Flash-рүү хөрвүүлдэг. Гэхдээ хэрэв танд Flash байхгүй бол FLV руу файлыг хөрвүүлэх хоёр алдартай хэрэгсэл энд байна:
- SUPER (Windows) нь MP4, FLV зэрэг олон төрлийн файлын төрлийг хөрвүүлнэ
- ffmpegX (Macintosh) нь Mp4 болон FLV руу олон төрлийн файлын төрлийг хөрвүүлнэ.
FLV файлаа вэбсайтдаа хадгалах ба дараагийн хуудас нь HTML-г хэрхэн бичихийг харуулах болно.
10-р хэсэг
Видео Элементийг Таны Вэб хуудсанд нэмнэ үү
Веб хуудсанд видеог нэмэхийн тулд HTML 5-ийг ашиглах нь маш хялбар байдаг. Ихэнх орчин үеийн хөтөч HTML 5 видеог дэмждэг боловч тэдгээр нь бүгд ижил аргаар дэмждэггүй. Гэхдээ энэ нь хэрвээ та Ogg болон MP4 форматтай адил видео бичлэгээ хадгалах юм бол ихэнхдээ орчин үеийн хөтөч дээр (Internet Explorer 8 гэхээс бусад) харуулахын тулд ердөө дөрөв эсвэл таван мөр HTML бичих боломжтой болно. Үүнд:
- HTML 5 doctype тэмдэгтийг бичихдээ browsers HTML 5:
- Ердийн үед үүсгэсэн вэб хуудсаа үүсгэ:
title>
head>
body>
html> - Бие доторх
- Өөрийн видеог ямар зан чанарыг хүсэхийг шийдээрэй:
- autoplay - татаж авмагц эхэлнэ
- controls - таны уншигчид видеог хянах (түр завсарлах, буцаах, хурдан урагшлуулах)
- давталт - эхлэлээс эхлэн видеог эхэлж дуусгах
- preload - видеог урьдчилан татаж авахын тулд хэрэглэгчийн товчлуур дээр дарахад бэлэн болсон байх болно
- зурагт хуудас - видеог зогсоох үед ашиглахыг хүссэн дүрсийг тодорхойлно
<видео тохиргоо 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 дээр ажилладаг видео байх болно. Гэхдээ Internet Explorer-ийн тухайд юу вэ?
Internet Explorer нь HTML 5 эсвэл <видео> Тагийнх шиг биш юм
Дараагийн хэсэгт IE 8-г HTML 5 видео бичлэгүүдтэй сайн тоглуулахын тулд та юу хийж чадах талаар ярилцаж, видеог үзүүлнэ үү. Та Flash ашиглах хэрэгтэй. Сайн мэдээ нь IE 9 нь HTML 5 болон видео тагийг дэмждэг байх болно.
08-ийн 10
Internet Explorer-г ажиллуулахын тулд JavaScript болон Flash Player нэмнэ үү
Өмнөх хуудсын HTML-д FLV файлд зориулсан эх үүсвэрийн мөр байгаагүй гэдгийг та анзаарсан байх. Хэрэв та Интернет Explorer дээр тэр хуудсыг туршиж үзвэл энэ нь ажиллахгүй болно. Интернэт Explorer нь HTML 5-ийг таниагүй бөгөөд OGG эсвэл MP4 видеог угаасаа тоглуулж чадахгүй байна. Internet Explorer 7 ба 8-г ажиллуулахын тулд та видеог Flash болгон тоглуулах хэрэгтэй. Гэхдээ FLV файлыг нэмэхээс илүүтэйгээр ажиллахад илүү олон алхамууд бий.
Алхам 1: Вэбсайтаа Flash Video Player авах
Бид FlowPlayer-г авахыг зөвлөж байна. Учир нь энэ нь таны вэб сервер дээр суурилсан нээлттэй эх Flash видео тоглуулагч бөгөөд танд Flash видео тоглуулах үед ашиглах боломжтой. FlowPlayer-ийн үнэгүй хувилбар таны видеонуудад зар сурталчилгаа оруулдаг боловч танд хэрэгцээтэй бол арилжааны лицензүүдийг бас худалдан авч болно.
FlowPlayer сайтын зааварчилгааг дагахын тулд FlowPlayer-г вэбсайтдаа суулгаарай. Товчхондоо та өөрийн вэбсайт дээр 2 SWF файл болон JavaScript файлыг суулгах болно. Таны HTML-ийн доод талд, ( body> тагны өмнө) та мөр нэмэх болно: