Videon sijoittaminen HTML5-merkintään on yksinkertainen, monimutkaisempi mille tahansa selaimelle kuin kuvankäsittely. Tässä artikkelissa hyödynnetään täysimääräisesti sisäänrakennettua selainta tukevasta videon soittimesta.

Laatimme sovelluksen peruspuitteet ja käytämme sitä

edellytykset

Käytä Chrome, Safari tai Internet Explorer 9+. Ajan kuluttua sinun on vältettävä Firefoxia ja Operaa selaimen välisten videotiedostomuoto-ongelmien vuoksi. Vaikka videoelementin tuki on johdonmukainen kaikissa moderneissa selaimissa, MP4-formaatti menee ylös Firefoxiin ja Operaan. Sinä pystyt tarkista yhteensopivuus täällä.

Ennen kuin aloitat, sinun täytyy löytää .mp4, jota voit käyttää, jos sinulla ei ole sellaista, löydät paljon ilmaisia ​​mp4-tiedostoja verkossa.

Peruskehyksen rakentaminen

Seuraava koodi on kehys, jonka ympärille rakennat soittimen. Se luo yksinkertaisen ulkoasun ja sillä on paikanvaraaja itse videolle.

Sinun täytyy luoda uusi HTML-tiedosto työhakemistoosi ja nimetä se index.html ja lisää sitten tämä koodi:

HTML5 Video Player

Nyt perustettu säätiö päästää pelaajan hauskoihin osiin lisäämällä videon sivulle.

Videoleikkeen käyttäminen videoiden lisäämiseen verkkosivuille

Tavoitteena HTML5: n suunnittelussa

Seuraavassa on, miten HTML5-video näyttää Chrome:

Seuraava listaus näyttää kaikki videon näyttämiseen tarvittavat koodit. Kuten näet, se ei ole monimutkainen.

Lisää tämä koodi " "Kommentti edellä olevaan koodiin, varmista, että vaihdat [YOUR VIDEO] -asi .mp4: n polkuun ja päivität sivun.