A cikk bemutatja a szerkezet Audio és Video konténer HTML5, Címkék videó, audió, FORRÁS, vágány, és attribútumok lehetséges értékei. HTML sablonok és példák a multimédiás fájlok lejátszásának végrehajtására a böngészőbe beépített beépített képességek alapján. A feliratok szövegének, fejlécek, tartalomjegyzékének szövegének összekapcsolása Webvttt formátumú fájlok segítségével példákkal. HTML5 kód sablonok mikro-dimenziós Schema.org audio és videó bemutatása. Az alapvető Web formátumú audio és video fájlokat a MIME típusokat és eszközök átalakítására videó és audió formátumokat, hogy ezek vannak feltüntetve.
BAN BEN HTML5. Vannak olyan új funkciók, amelyek lehetővé teszik, hogy az audio- és videofájlokat közvetlenül a böngészőhöz a harmadik féltől származó programok használata nélkül lehessen használni. Eddig, annak ellenére, hogy HTML5. Már nem hírek, még mindig nézeteltérés van a böngészők kezelésében videó. és hang. És hogyan jelenik meg a játékos. Néhányan mindezek jobbak minden új verzióval, mások még mindig elmaradnak. Globálisan az a tendencia annak biztosítása, hogy a böngészők egyre jobban funkcionálisak legyenek a multimédiás fájlok lejátszásához.
Screenst: Példa a sablonok használatára
Videó letöltése
Skrinst: Példák a sablonok használatára a cikkből - webhelyről
HTML5. A videó és audio fejlesztési szabvány, és nem kapcsolódik az audió vagy a videó bármilyen formátumához, így különbségek vannak a böngészők között formátum Hang- és videofájlok. Ez a különbség már ellensúlyozza az a tény, hogy a kódolás az eredeti fájl több különböző kodekek és amellyel mindezen változatai fájlokat a címkéket. vagy A beágyazott címkék segítségével <
forrássrc \u003d "URL "\u003e. A böngészők által támogatott hang- és videofájlok között azonban a vezetők ütemezik. A videó esetében természetesen formátum mp4 (H.264.), és a hangformátumra mp3 és m4A.. Most, valószínűleg minden böngésző képes lejátszani ezeket a formátumokat. Szintén böngészők Firefox., Króm. és Opera. Beleegyezett abba, hogy támogassa a WEBM szabványt általános videó formátumként. Az én szempontból optimális most használni HTML5. A videó és a hang lesz egy olyan rendszer, amely egy multimédiás fájl formátumban van mp4(H.264.) videó és m4A. Audio I. JS.HTML5. Játékos. A megadott formátumban csak egy fájl csatlakozik az audio- vagy video tartályhoz. Most a legtöbb böngésző képes MP4 formátum lejátszására. A Connected JS könyvtár stilizálja a böngészőbe beépített lejátszót. Ha a böngésző nem támogatja a formátumot mp4/m4A.T. JS. Játékos, ebben az esetben végrehajtja a Flash Player csatlakoztatását a multimédia fájl lejátszásához. Tekintettel arra, hogy MP4 formátumban lett nagyon népszerű, amit remélhetünk, kicsi a valószínűsége problémákat a reprodukcióra böngészők. Az ilyen rendszer csak egy multimédiás fájlt igényel a megadott formátumban, amely megmenti a lemezterületet és az erőforrásokat a fájlok feldolgozásához. Ezenkívül egy ilyen rendszer stratégiailag helyes lesz, mivel a tendencia az a tény, hogy a böngészők egyre inkább teljesítik a végrehajtást HTML5. Videó és hang.
A HTML5 megadásához a fájl lejátszója szükséges, a fájl fájlja mellett, átvitel és Pantomim. Fájltípus, bármilyen böngésző megérteni, hogy melyik codec-t kell használni. Az alábbi táblázatban tisztázza a leggyakoribb fájlformátumokat és azok Pantomim. Típusok.
Fájlformátumok és MIME-típusuk
Multimédia fájlok
Kiterjesztések
MIME típus
Audio MP3
mp3
audio / MPEG.
Audio MP4
m4A.
aUDIO / MP4.
Audio Webm.
webm.
audio / Webm.
Audio OGG.
ogg
audio / Ogg.
Video Mp4 (H.264)
mp4
vIDEO / MP4.
Videó webm.
webm.
videó / webm.
Video Ogg.
oGV.
vIDEO / OGG.
Audio és video fájl kódoló eszközök
A video- és hangfájlok kódolásához a fenti webes formátumokhoz használhatja a nyílt programot, amely támogatja az audio- és videofájlok átalakítását az interneten közös fő formátumokhoz. Mp4, Webm., Ogg Theora., Mp3 stb.). Miro Video Converter. Különböző operációs rendszerekhez rendelkezésre áll - ablakok, Mac. és Linux. És ez egy grafikus shell konzol közművek és, ami kényelmes a használata a web szerver feldolgozza a letöltött videó és audió automatikus üzemmódban.
HTML5 Kód Példa Audio mikro-dimenziós Schema.org:
Audio fejléc
Ez úgy néz ki, mintha a fent leírt audio sablon kódból kivont mikroszimenziós adatok jelennek meg.
AudiooBject itemtype \u003d http://schema.org/audiooBject Name \u003d audio header description \u003d hangalámondás ... isfamilyfriendly \u003d true encodingformat \u003d mp3 időtartama \u003d PT04M59S uploadDate \u003d 2015-12-31 image \u003d Teljes url image.jpg alternatename \u003d alternatív Cím Audio ContenturL href \u003d URL to file.mp3 text \u003d Download audio szerző személy itemtype \u003d http://schema.org/person URL href \u003d URL szöveg \u003d A szerző neve \u003d A szerző neve image \u003d teljes URL a személyre.jpg
Minimális jelölési hang schema.org. Tartalmaznia kell itemprop.\u003d "Név", itemprop.\u003d "Leírás", itemprop.\u003d "ContenturL". A fennmaradó tulajdonságok nem kötelezőek.
Példa a szabványos használatra HTML5 címke
A demonstrációban a címkére alkalmaztam az attribútumon keresztül osztályCSS. Stílusok A video dinamikus terület szélességét a képernyő méretétől függően. A játékos magasságában állítsa be magát. Próbálja meg megváltoztatni a böngésző ablakméretét annak megtekintéséhez, hogyan működik. Ezért a demonstráció kódjának forrásában nincsenek attribútumok szélesség. és magasság A címkén Helyettesítik őket CSS. Stílusok. De a sablon kódjának felsorolásában ez nem jelenik meg, mert Már privát.
HTML5 példa kód videó mikro-dimenziós Schema.org:
Videó címe
Nézd a YouTube-on
Ez úgy néz ki, mintha a fent leírt videosablon kódból kivont mikroszimenziós adatok vannak.
VideoBject ItemType \u003d http://schema.org/videoobject név \u003d Videócím thumbnail ImageObject itemtype \u003d http://schema.org/imageObject contenturl \u003d URL a video-thombnail.jpg | png szélesség \u003d 100 magasság \u003d 100 időtartam \u003d pt14m59s isFamilyfraily \u003d TRUE UPLOADDATE \u003d 2015-12-31 Leírás \u003d Rövid leírás a videóhoz ... URL href \u003d URL to file.mp4 text \u003d video cím Szerzői személy itemtype \u003d http://schema.org/person url href \u003d URL a szerző web Oldal szöveg \u003d szerző neve neve \u003d szerző neve image \u003d teljes url a szerző.jpg thumbnailurl \u003d url fájlba.jpg | png
Minimális szükségtelen A videót jelölő keresőmotorok számára schema.org. tartalmaznia kell az összes tulajdonságot a kódban itemprop. Kivéve a blokkot itemprop.\u003d "Szerző", amely nem kötelező a keresőmotorok számára, és törölhető, ha nincs adat kitöltéséhez. -Ért video-miniatűr A Yandex egy mikrohullámú sütőt igényel schema.org. mint itemprop.\u003d "miniatűr" az űrlapon ImageObject., de Google azt kell jeleznie, mint itemprop.\u003d "Thumbnailurl", így be kell illesztenie video-miniatűr A második alkalommal, ezért a második címke img van stílus kijelző: nincsMi nem jelenik meg a böngészőben. Használható helyett img TAG S. kijelző: nincs közvetíti ezt a tulajdonságcímkét lINK. az attribútumon keresztül href.. Annak ellenére is, hogy a mikro-dimenziót a felhasználó által nem ábrázolt meta-címkéken keresztül továbbíthatja lINK.Javasoljuk, hogy mikrohullámú mikrohullámot adjon hozzá a címkékhez, hogy hozzáadjon egy mikrohullámot a felhasználónak. Hegyértékesítés schema.org. Ezen a linkeken teheted:, A mikrográf használatának fő előnye az ilyen tartalom kényelme a keresési robotok és a szociális hálózati robotok számára. Ezek a robotok megjelölték az adatokat és aggregálják őket. Ezért a mikro-dimenziós javítások használata SEO. És elősegíti az adatok automatikus eloszlását a közösségi hálózatokon. A mikrohullámú Schema.org részletes leírása a rendszer által megjelölt videóhoz Videoobjec.t az oldalon. Azt is érdemes megjegyezni, hogy az esetek esetében, amikor beillesztést teszel a webhelyére, a videó nem közvetlenül, de a video hosting widgetek használata Yandex.videos vagy Youtube.Hozzáadhatja a HTML kódblokkot a Widget blokkkódja alatt a videó leírásával, és beágyaz egy Micarkot Schema.org. Ehhez a videóhoz. Ugyanakkor, mint URL paraméter - A videóhoz való hivatkozások, adja meg a közvetlen kapcsolatot egy statikus fájlhoz, és állítsa be a videó tárhelyétől kapott linket. Bár a Schema.org specifikációban, és írja, hogy a linknek közvetlen fájlban kell lennie, de a keresőmotorok feldolgozása és a video hosting videóhoz tartozó linkek ( lásd a példákat a Yandex weboldalán a Webmester részben), Annak ellenére, hogy ezen a linken nem lehet letölteni a fájlt, és nem tudja megtekinteni azt közvetlenül a HTML5 médialejátszó az oldalon, csak a video ellenséges widget.
Ha van olyan kérdés, amelyről a multimédiás hang- és videofájlok feltöltése, majd nézze meg a cikket, amelyben a médiafájlok beillesztésének lehetősége a YANDEX lemezről származó weboldalra történő beillesztése.
Tulajdonságok és Címke:
Tulajdonságok src, előtöltés., automatikus lejátszás, mediaGroup., hurok., mued., ellenőrzések. az összes médiaelemre vonatkozó általános attribútumok, beleértve a címkéket is és .