HTML 5 Video теги ал үчүн көрмө кошуу кыйын Желе-беттер . Бирок бул бетинде жеңил көрүнөт, ал эми сиз көргөзмө туруп, чуркап үчүн эмне кылышыбыз керек нерселер бир топ бар. Бул окуу куралы менен баракты түзүү үчүн кадамдар аркылуу алып HTML азыркы браузерлерде Video чуркап 5.
- Хостинг YouTube колдонуу vs. Өз HTML 5 Video
- Желедеги Video колдоо Quick Обзор
- Түзүү жана Сиздин Video Edit
- Firefox үчүн OGG үчүн Video Convert
- Safari үчүн MP4 үчүн Video Convert
- Internet Explorer боюнча FLV үчүн Video Convert
- Желе Баракка Video элементти кошуу
- JavaScript жана кошуу Flash Part 1 Internet Explorer жумушка баруу Player
- Көп браузерлерде Test As You Can
01 10
Хостинг YouTube колдонуу vs. Өз HTML 5 Video
YouTube мыкты сайт болуп саналат. Ал кирип Video коюусуна жеңил кылат Желе беттеринде тез, жана кээ бир майда албаганда ошол тасманы өз аткарууда кыйла калыпта турат. Сиз YouTube боюнча сюжет пост болсо, анда кимдир бирөө аны көрө алышат деп кыйла толук ишенсек болот.
Ал эми Сиздин Videos киргизүү үчүн YouTube колдонуп кээ бир кемчиликтерге ээ
YouTube менен көйгөйлөрдүн көпчүлүгү керектөөчү тарабында турган эмес, дизайнер тараптан караганда, окшош нерселер:
- Жай издөө жана индекстөө
- Server сөгүш жарыялады
- Мазмун алынып (көрүнгөн) ээнбаштык
- Өтө көп жаман мазмун
Бирок, YouTube, анын ичинде, ошондой эле мазмуну иштеп, жамандык эмне үчүн бир нече себептер бар:
- 10 мүнөттүк Videos максималдуу узундугу (акысыз эсеп боюнча)
- Poor жүктөп аткаруу
- YouTube сиздин көрмө чексиз пайдалануу укуктарына ээ
- Ар бир YouTube колдонуучу сиздин көрмө чексиз пайдалануу укуктарына ээ
HTML 5 Video YouTube ичинде артыкчылык берет
Колдонуу HTML 5 Video үчүн Server натыйжалуулук өттү жана кайсы жерге мазмунду камтыйт, эмне, аны көрө аласыз ким тартып, канча убакытка чейин ал, сиздин бардык тараптарын көзөмөлдөгөн коё берет. Жана HTML 5 Video сизге адамдардын саны көрө алышы үчүн, эмне кылышым керек эле көп ыкмалары менен Video Encode мүмкүнчүлүк берет. Сиздин кардарлар плагин кереги жок же YouTube диктант релиздер чейин күтүп.
Албетте, HTML 5 Video айрым ске сунуштар
Аларга төмөнкүлөр кирет:
- Сиз, бери дегенде, үч башка кодектер сиздин Video Encode керек
- Сиз колдоого албайбыз браузерлерге камсыз кылуу үчүн кээ бир JavaScript камтышы керек HTML 5 иштейт
- Сиздин Server хостинг Көрмөлөр өткөрмө талаптарын чечүүгө жөндөмдүү болушу керек
02 10
Желедеги Video колдоо Quick Обзор
Желе беттерине Video кошуу узак кыйын иш болду. туура эмес бара турган абдан көп нерсе бар эле:
- Биринчиден, сен бетине Сиздин канал тиркеш үчүн <киргизип> теги колдонушат. Бирок, теги башка материалдар пайдасына сунушталбайт. Ал эми кээ бир серепчилер баары бир аны колдоого эч качан.
- Ошентип, <объект> тегинин, ал эми улгайган серепчилер аны жана башка браузерлер аны колдоо боюнча үзгүлтүк колдоо эмес, өтүү.
- Ошондо силер "деп Жарк !" Ал эми FLV делосуна катары Video Encode. Бирок Flash көптөгөн мобилдик түзмөктөрдө жана көп адамдар эч нерсеге, ал (менин сурамжыланган адамдардын 25% колдонулат кандай Жарк жек колдоого алынбайт Flash жөнүндө кандай сурамжылоо сурап сезип , алар Жарк кандайдыр бир жол менен туруштук бере алат деп көрсөтүлгөн).
- Демек, YouTube сыяктуу көргөзмө Кыналуучу сайттын сиздин жүктөө жөнүндө чечим, бирок анда биз талкуулашты YouTube менен маселелер бар.
- Акыр-аягы, сиз 5 HTML менен барууну чечкен, бирок, Internet Explorer (Internet Explorer 9 чейин эмес), аны колдобойт. Сен да, экөө колдоно аласыз колдоого алынган жана бир гана браузер эки көргөзмө кодек нормалары бар. Video кодектер жана контейнерлерди үчүн Browser колдоо
Ошентип, сен эмне үчүн эмне? Video боюнча берүү көргөзмө көбүрөөк маанилүү болуп жатат, мындан ары көпчүлүк сайттар үчүн мүмкүндүгү болуп саналат. Көптөгөн сайттар ийгиликтүү Video өтүштү.
Бул макалада сени менен кантип Желе беттеринде Firefox иштей Video кошуу үчүн чыга турган беттер 3,5, опера 10.5, Chrome 3.0, Safari-3 жана 4-Тойлордун жана Android, Flash жана Internet Explorer 7 жана 8-Сиз ошондой эле, зарыл болсо, башка улгайган браузерлер үчүн колдоо керек ачкычтары Менде.
03 10
Түзүү жана Сиздин Video Edit
Эгер Желе-беттеги сюжет үчүн бара жатканда биринчи кезекте чыныгы көргөзмө болуп саналат. Сиз тынымсыз атып, аны бир өзгөчөлүктү же жазма мүмкүн түзүү үчүн кийин өзгөртүү жана мөөнөтүнөн мурда, аны пландаштыруу да болот. Кандай болсо да, жакшы иштейт, ал сиз менен көнүшүп баарын жөн гана. Эгер керек роликтин кандай билген эмес болсо, анда иш Video колдонмодо бул ойлорун ишке текшерүү:
- Үй-бүлө менен Video долбоорлор
- Маркетинг жана Жарнак Videos
- Video Virtual Тур
- Кантип Videos
- Wedding Videos
Жогорку сапаттагы Video Record кантип Үйрөнүү
Сиз Аудио жаздыруу үчүн кантип үйгө жана жаратылышта, ошондой эле эсепке алуу үчүн эмне кылуу керек экендигин текшерип били¾из. эле ылай жана кесипкөй карап да жаркыраган көздөрү зыян, өтө караңгы болуп, ок - Жарык кылуу, ошондой эле абдан маанилүү. гана сайтында 30-экинчи Video пландаштырылат болсо да, жогорку сапаттагы жакшы бул сайт жөнүндө ой жүгүртүү болот.
Экенин да унутпа укук сиз жонундо колдонууну каалаган ар кандай үндөрдү же музыкалык (ошондой эле баалуу кагаздар кадрлар) тиешелүү. жазуу жана сен үчүн ыр ойной алат досунун мүмкүнчүлүк жок болсо, анда сиз тек ойноону сый-музыканы табыш керек. Ошондой эле, сиздин кошуу үчүн кадрлары табууга болот жерлер бар.
Мурун Сиздин Video
Бул сиз колдонгон түзөтүү программа, так ошондой, сиз аны менен тааныш, ошондой эле эч кандай мааниге ээ эмес натыйжалуу колдонсок болот. Gretchen, такта Video Guide, алар ал жерден көп карап, ошондуктан сен Videos түзөтүүгө жардам берет, кээ бир кесиптик Video түзөтүү көрүүгү болот элек.
бир MOV же репортаж Сиздин Video сактоо (же МДТ, CD, DV)
Бул үйрөткүч калган үчүн, биз Сенин Video AVI же MOV сыяктуу жогорку сапаттагы (эмес Кысылган) түрдө бир нече түрү менен куткарып алууга жатат. Эгер алар бул документ колдоно аласыз, ал эми биз буга чейин талкуулап жаткан Video менен бардык көйгөйлөр кезигишет. барагына ал браузерлердин ири санына көрүнөө деп үч түргө сиздин билэни кайра кантип түшүндүрүп берет.
04 10
Firefox үчүн OGG үчүн Video Convert
биз кабыл алып, биринчи формат Ogg (кээде Ogg-Theora деп аталат). Бул формат Firefox деп бири болуп саналат 3.5, Опера 10.5, жана Chrome 3 көрө аласыз.
Тилекке каршы, Ogg серепчи колдоосуна ээ, ал эми сен (Adobe Медиа Encoder, QuickTime, ж.б.) сатып алууга болот, ошондой эле белгилүү көрмө программаларды көптөгөн Ogg өзгөртүү жолду сунуш жок. OGG үчүн Video айландыруу үчүн бир гана жол Ошентип, интернет боюнча өзгөртүү программаны табуу болуп саналат.
айландыруу Жолдор
Video (жана аудио) башка Video (аудио) түрдө кирген ар кандай түрлөрүн динине ырастайт Медиа-Convert деп онлайн курал бар. менин 3-Экинчи сыноо Video менен аракет кылган, биз ал менин Mac иштей ала алган эмес. Бирок силер жакшы ийгилик болушу мүмкүн. Бул сайт эркин болуу пайда болот.
Биз кээ бир башка аспаптар кирет:
- Miro Video Converter (Windows Macintosh) - Бул программа OGG жана MP4 (H.264) да кабыл пайда алып келди жана ачык булак болот.
- Koyote Video Converter (Windows)
- Free Video Converter Биз бул Windows жана Macintosh нускасы да бар деп ойлойм, бирок алардын сайттан айтып кыйын болгон
- Simple Theora Encoder (Macintosh) - бул, биз колдонгон адатта бири болуп саналат.
Эгер Video Ogg түрдө сакталган бар болсо, интернет-сайтында жайгашкан, аны сактоо жана башка браузерлер учун башка түрдө аны кайра кийинки бетине барып.
05 10
Safari үчүн MP4 үчүн Video Convert
ал Safari-3 жана 4-жана Тойлордун жана Android боюнча ойной алат, ошондуктан кийинки формат Сиздин канал салып MP4 болот (H.264 Video) айландыруу керек. Plus, H.264 Videos жонокой Flash көрүп боюнча документтерди FLV динин кабыл алат.
Бул формат соода буюмдарды көп бар, жана, балким, буга чейин сиз Video редактор болсо, MP4 которо турган программа бар. Сиз Adobe Premiere бар болсо, Adobe Video Encoder, же QuickTime Pro бар болсо, ошондой эле иш үчүн колдоно аласыз. өзгөрткүчтөрдүн, биз мурдагы бетте талкуулашты да MP4 үчүн Videos айландырат көбү.
- Медиа-Convert - онлайн куралы
- Miro Video Converter (Windows Macintosh) - Бул программа OGG жана MP4 (H.264) да кабыл пайда алып келди жана ачык булак болот.
- SUPER (Windows) - MP4 жана FLV көптөгөн ар кандай билэ түрлөрүн калат
- Free Video Converter Биз бул Windows жана Macintosh нускасы да бар деп ойлойм, бирок алардын сайттан айтып кыйын болгон
Сиздердин сайтта үчүн MP4 сактап, андан кийин сиз аны Internet Explorer колдонуу үчүн жаркыраш үчүн айландыруу керек.
06 10
Internet Explorer боюнча FLV үчүн Video Convert
FLV үчүн Videos динине жагы Жарк өзү пайдалануу болуп саналат. Ошондуктан биз Flash менин Videos алмаштырууга болот. Сиз Жарк жок болсо, бул жерде FLV үчүн материалдары айландыруу эки элдик аспаптар болуп төмөнкүлөр саналат:
- SUPER (Windows) - MP4 жана FLV көптөгөн ар кандай билэ түрлөрүн калат
- ffmpegX (Macintosh) - mp4, FLV көптөгөн ар кандай билэ түрлөрүн алып келет.
Сиздердин сайтта үчүн FLV сактап жана кийинки бет сиз клиптерди ойнотууга деп HTML жазып кантип көрсөтө турган.
07 10
Желе Баракка Video элементти кошуу
Ал Желе беттерине Video кошуу HTML 5 колдонуу өтө жеңил болуп саналат. Бүгүнкү күндөгү браузерлердин баары эле аны колдогон жок да, HTML 5 Video колдоо. Бирок бул эмнени билдирерин сиз OGG жана MP4 түрдө да, ошондой эле Сиздин канал сактоо болсо, анда ал бүгүнкү браузерлер (Internet Explorer 8 тышкары) көпчүлүк өзгөрүүлөр үчүн HTML эле төрт же беш саптарды жазып бере берет. Бул жерде кандай:
- HTML 5 DOCTYPE бла жазуу үчүн браузерлер HTML 5 күтүп билем:
- Адатта аны түзүп турган катары сайтты түзүү:
<Башчысы>
<Аты>
<Орган>
- дененин ичинде, <көргөзмө> теги жайгаштырууга:
- Эгер Video болууну каалашат касиети кандай токтом кылам:
- ойнотуу - замат жүктөлүп жатат деп башталат
- башкаруу - (пауза тез алдыга, түрүү) силердин окурмандар Video башкаруу үчүн жол
- укурук - ал бүткөн башынан Video башталат
- Алдын - кардар аны замат ал тезирээк даяр экенин Video алдын-ала жүктөп алуу
- плакат - Video токтотуп качан колдонууну каалаган сүрөттү аныктайт
- Ошондо
- Chrome менен баракты ачуу 1, Firefox 3.5, опера, 10, жана / же Safari-4 жана туура көрсөтүп турушу керек. Сиз, аны менен, жок дегенде, Firefox 3,5 жана Safari 4 текшеришибиз керек - алар ар башка кодегин колдонушат.
Дал ушул. ордунда бул коду кийин, Firefox 3,5 иштейт сюжет болот, Safari-4, Опера 10, Chrome 1. Бирок Internet Explorer тууралуу эмне дешке болот?
Internet Explorer HTML 5 же <көргөзмө> теги жактырчу эмес
кийинки бөлүмдө, биз сиз IE 8 HTML 5 Video Tags менен сонун ойноп алып, сюжет көрсөтө аларыбыз жөнүндө да сүйлөшөбүз. Сиз Жарк колдонуу керек. жакшы кабар IE 9 HTML 5-жана көрмө теги колдоо күтүлүүдө болуп саналат.
08 10
Get Internet Explorer үчүн иштеш JavaScript жана Flash Player кошуу
Сиз мурунку Барактын HTML-жылы, FLV для жок булагы линия бар экенин байкады мүмкүн. Сиз Internet Explorer бул баракты сыналган, анда иштеген эмес. Бул Internet Explorer HTML 5 жана тилинде чет OGG же MP4 да клиптерди ойнотууга мүмкүн эмес тааныган жок, анткени ал. Internet Explorer 7 жана 8 ишке алуу үчүн, балким, Flash катары ойнотууга болушу керек. Бирок FLV билэни кошуу ашык иштөөгө, аны алуу үчүн көп кадам бар.
1-кадам: Сиздин сайты үчүн Flash Player Video Get
Биз ачык булагы Flash Video оюнчу болуп саналат, анткени менен учууну артык алып сиз WEB Server боюнча орното алат жана ойнотуу үчүн Flash Video болбосун пайдаланууга сунуштайбыз. Учууну акысыз чыгаруу сиздин салып жарнама киргизет, бирок сен аларга керек болсо, ошондой эле соода укугун сатып алууга болот.
Сиздин сайтында менен учууну артык орнотуу менен учууну артык сайтында көрсөтмөлөрдү керек. Кыскача айтканда, 2 Женский материалдары жана сайтында JavaScript билэни орнотуп түзөсүз. Сиздин HTML түбүндө ( тегинин чейин) бир сапты кошуу аласыз:
<Скрипт УРА = "flowplayer.min.js">
Бирок, Internet Explorer дагы ойнотууга жок болот, силер кандай HTML 5 теги таануу үчүн аны үйрөтүү керек.
2-кадам: Internet Explorer HTML 5 Tags окуу үчүн далилдеп
IE HTML 5 сыяктуу элементтерди байкоого жардам берет "HTML Shiv" деп аталган Google кодекс боюнча колдо болгон жазма бар. Ошондуктан HTML документтин <башына> Сиз, аны маалымат келет. башка браузерлер аралаштырып эмес, ошондуктан Ал IE шарттуу пикирлер протоколго тиркөөгө жакшы:
<Скрипт УРА = "http://html5shiv.googlecode.com/svn/trunk/html5.js">
Болуптур, эми IE
3-кадам: FLV File үчүн Source сызыгы кошуу
Эгер мурдагы бетте кылды эле, сиз жүрүш боюнча FLV билэни саткап көрсөтөт
09 10
Иштеш үчүн Internet Explorer алуу үчүн JavaScript жана Flash Player кошуу - 2-бөлүк
Тилекке каршы, биз дагы деле кылган эмес жатабыз. Биз азыр, биз жогоруда белгиленген жигит менен учууну артык Flash ойноткуч пайдаланууга IE бериши керек.
4-кадам:
Бул үчүн биз дагы бир скрипт керек. Биз скрипттер туруп 5 кирет HTML Dive . биз аны сынап Бирок, ал өзгөрүүлөр бир нече кылып чейин иштеген жок:
- 31 Around: Сиздин менен учууну артык орнотуу жайгашкан кошуу.
- Around сапта 42: тартып билэ түрүн өзгөртүү
Video / mp4
үчүнVideo / х-FLV
- Around сапта 94: баштап
эгер (!! $ && !! $ (документ) .ready) {
документ аягына чейин окуп, ал бөлүмүн өзгөртүү:// болсо (!! $ && !! $ (документ) .ready) {
/ * DOM даяр Код колдонуучулар тез арада чыгаруу мүмкүн * /
// $ (документ) .ready (html5_video_init);
//} башка {
/ * Ар бир адам башка onload чейин күтө алабыз * /
/ * Http://www.ilfilosofo.com/blog/2008/04/14/addevent-preserving-this/ аркылуу addEvent милдети * /
VAR addEvent = милдети (Келчи, түрү, FN) {
эгер (obj.addEventListener)
obj.addEventListener (түрү, элүштү, жалган);
башка болсо (obj.attachEvent)
obj.attachEvent ( "боюнча" + түрү, милдети () {fn.apply (Келчи, жаңы Array (window.event) кайрылып);});
}
addEvent (терезе, "жүк", html5_video_init);
//}
Сиз JavaScript билэни түзөткөн болсо, жүрүш жана HTML-беттин ылдый жагында ага шилтеме жүктөп ( мурун):
<Скрипт УРА = "HTML5-video.js">
Whew! Эми сен баарын кылып жатам деп, сиз тестирлөө болот, ошондуктан сиздин HTML жүктөп керек.
10 10
Көп браузерлерде Test As You Can
Эгер ийгиликтүү ишке ээ болгубуз келсе, сынап көргөзмө-беттер, сын-пикирлерди айтып жатышат. Сиз интернет үчүн бир кыйла популярдуу браузерлер жана котормолордо сиздин бет сынаш үчүн сөзсүз болушу керек.
Биз Video сынаш үчүн BrowserLab жана AnyBrowser сыяктуу куралдарды колдонууга мүмкүн, ал эми, бул серепчиден өзүң жөнүндө бет алып эле ишенимдүү эмес деп таптым. Эгер чындап эле же иш жок болсо көрө алабыз деп жатканда.
Сен аны үч түрдө сиздин Video Encode бардык кыйынчылыктарды барып-жылдан бери, балким, бардык үч көрсөтүп ынануу үчүн, аны текшеришибиз керек. жок эле дегенде, аны сынаш керек бул, дегенди билдирет:
- Firefox 3.5
- Safari 3 же 4
- Internet Explorer 7 же 8
башка эки же Chrome колдонуп жатат кодек бири менен кандайдыр бир көйгөй бар болсо, Chrome, бирок Chrome үч ыкмаларын көрүү, анткени (Сиз плагин бар болсо, ал тургай, Flash), аны айтыш абдан кыйын сыноо болот.
жандүйнө бейкуттугуна үчүн, сен да окурмандарга бир топ улгайган браузерлерге колдонуу, өзгөчө, алар, эмне болорун көрүш үчүн, улуу-бир браузерлерди менен текшеришибиз керек.
Улгайган браузерлерде Video Working алынууда
ар кандай Желе баракчасы менен эле, сен биринчи бул иш ошол эле браузерлерге алуу үчүн канчалык маанилүү экенин эске алуу керек. Сиздин кардарлардын 90% Netscape колдоно турган болсо, анда алар үчүн чегинүү планы болушу керек. 1% дан кем эмес иш кыла баштаса, ал ушунчалык көп мааниге ээ эмес болушу мүмкүн.
Сиз колдоого аракет жаткан серепчилери эмне чечкенден кийин, жөнөкөй жол менен эле аларды тасманы көрүү үчүн кошумча баракты түзүү болуп саналат. Бул кошумча барагында, сиз, 4. HTML менен сюжет кой, анан же аларды бириктирүү же серепчи табылган кээ бир түрүн колдонуп, жөн гана ошол баракка шилтемени кошуу.