Nuttige wenke

Wenk 1: Hoe om 'n video op 'n webwerf in te sluit

Pin
Send
Share
Send
Send


As u te kampe het met die toevoeging van 'n videogreep op die bladsye van u webwerf of blog, maar nie weet hoe om dit te doen nie, dan is hierdie les vir u! In hierdie les gaan ons na drie alternatiewe maniere om video op die webwerf te voeg, en u kan die een kies wat u die beste wil hou.



Die internet ontwikkel elke dag meer en meer. Gebruikers wil vandag nie net tekste lees nie, maar ook verskillende grafiese elemente, verskillende interaktiewe toestelle sien en video's direk vanaf webblaaie kyk. In baie gevalle skep dit bykomende gemak vir die gebruiker (byvoorbeeld wanneer hy die video-instruksie kan kyk) of maak hy net die verblyf op die internetbron lekkerder.

Op die een of ander manier, of dit nou 'n nuttige video is met 'n les of instruksie, 'n demo-video van 'n produk of 'n onderhoudende video wat ontwerp is om die gebruiker se ontspanning te verlig, moet die video vroeër of later op 'n webblad ingebed word.

Daar is verskillende maniere om dit te doen. Ons sal vandag drie verskillende maniere oorweeg wat u sal help om hierdie taak te hanteer. Watter een om te kies is aan u. So laat ons gaan ...

Hoe om 'n video op 'n webwerf in te sluit

Om al ons voorbeelde te toets, sal ek 'n html-lêer maak, en 'n paar style daaraan koppel. Hieronder is die kode vir hierdie lêer en die kode vir die stylblad wat aan die HTML-dokument gekoppel is. U kan ook al hierdie lêers in die bron vir die les vind. Ek sal nie hierdie kode hier uitlê nie, want dit is baie eenvoudig, en ek dink dat u dit self baie goed sal verstaan, as iets egter nie duidelik is nie, kan u altyd u vraag in die kommentaar skryf, en ek sal dit beantwoord Ek sal beslis antwoord.

Dus, die HTML-lêerkode:

Dit is net 'n html5-lêer wat verskeie kopstukke bevat. Verder sal ons onder elkeen die ooreenstemmende kode plaas.

Ek het ook 'n paar style vir hierdie bladsy geregistreer. Dit word in die “style.css” -lêer gestoor, wat in dieselfde gids lê as die HTML-lêer. Die inhoud van die styl.css-lêer is soos volg:

As ons ons html-lêer in 'n blaaier oopmaak, sal dit so lyk:

Die voorbereiding is voltooi. Laat ons voortgaan om die video op die webblad self te plaas.

Eerste manierwat ons sal oorweeg - dit is 'n video-insetsel met die Youtube-diens.

1. Die eerste ding wat ons nodig het, is om 'n soort videogreep te hê wat ons wil inbring. Laat ons sê dat ons dit het en dit word op ons plaaslike rekenaar geberg.

Gaan nou na www.youtube.com. Hier moet ons op die "Login" -knoppie in die regter boonste hoek klik. Daarna moet u aanmeld met u Google-rekening. As u dit skielik nog nie het nie, moet u dit eers regkry.

2. Nadat u die diens onder u rekening ingevoer het, klik op die "Voeg video by" -knoppie. Die diens vra u om 'n lêer te kies om af te laai, en u kan die gewenste lêer kies wat op u rekenaar gestoor is.

Nadat u die gewenste lêer gekies het, sal dit begin laai. U moet 'n bietjie wag totdat dit vol gelaai is.

Nadat die video volledig afgelaai is, kan u op die skakel klik (u kan dit heel bo sien direk na die boodskap dat die aflaai voltooi is).

As u op hierdie skakel klik, sien u u video op die Youtube-diens.

3. Nou moet ons die kode kry om die video op ons webblad in te lê. Klik hier onder die video op die "Deel" -tab en daarin op die HTML-kode-oortjie.

Nou kan u die HTML-kode sien wat ons moet invoeg. Hier kan u ook 'n paar ander parameters instel, soos: die grootte van die video, of dit soortgelyke video's sal wees na kyk en privaatheid.

As u al die parameters opstel, kan u die kode kopieer en in u html-lêer plak. Ek plak die kode soos volg in die lêer onder die toepaslike opskrif:

En nou, as ons na die werk van ons html-lêer in die blaaier kyk, sal ons sien dat die video ingevoeg is en gesien kan word (u kan die kode in aksie sien deur op die "Demo" -ikoon aan die begin van die artikel te klik).

Hier is, dink ek, alles duidelik. Kom ons gaan na die volgende metode.

Voeg die video in met die speler se skrif.

U kan 'n video plaas sonder om dit na enige videodiens op te laai. As u om een ​​of ander rede nie 'n video na die diens wil oplaai nie, kan u die speler se skrif gebruik.

U moet dus 'n video hê wat u sal oplaai. Laat ons sê dat dit in 'n gids op u webwerf gestoor word. Ek sal die videolêer stoor in 'n lêergids met die naam “video”.

Nou het ons die speler self nodig. Op die oomblik is daar baie gratis spelers waarmee u video op die webwerf kan plaas. Laat ons die Flowplayer gebruik. Dit is 'n gratis videovideo-speler wat spesifiek vir webwerweienaars ontwerp is.

1. Laai die spelerlêers af op u rekenaar deur hier te klik: FlowPlayer

2. Nadat u die spelerlêers op u rekenaar afgelaai het, moet u dit uitpak in 'n lêergids op u webwerf. Ek het die 'flowplay'-lêergids geskep en die lêers daar oopgemaak.

3. Nou gaan ons oor na die html-lêer en gaan met 'n kode.
Die eerste ding wat ons moet doen, is om die JavaScript-lêer van die speler aan ons HTML-lêer te koppel. Hiervoor binne die tag kop, skryf onmiddellik die volgende kode onmiddellik nadat u die stylblad gekoppel het:

As u die lêer in 'n ander lêergids plaas, let dan daarop dat die pad na die lêer korrek gespel is.

4. Nou gaan ons in die liggaam van ons lêer en plaas die speler self met die lêer wat gespeel word. Ek plaas dit direk onder die ooreenstemmende opskrif, nadat ek dit in die div-tag geplaas het, wat in die middel sal belyn.

Hier moet u die paaie na die lêers nagaan en u eie registreer. Wees versigtig as u dit doen.

Daar is ook instellings wat verhoed dat die video outomaties begin, maar dit laat aflaai. As u wil hê dat die video outomaties moet begin, dan moet u, na die pad na die "flowplayer-3.2.2.swf" -lêer, die komma verwyder, die hakies toemaak en "," (sonder aanhalings) plaas, en alles wat hierna is en voor sluitingsmerk "/ script" om te verwyder.

As ons dus die bladsy in die blaaier kyk, sal ons sien dat ons nou twee video's het: een word van die YouTube-diens afgelaai, en die ander op ons webwerf gestoor en met die speler gelaai.

Onthou dat die video wat deur die speler opgelaai is, in die formaat moet wees .mp4 of .flv.

Kom ons probeer 'n ander manier en probeer dieselfde video aflaai., wat op ons bediener gestoor word, maar slegs met die nuwe funksies van HTML5.

1. Soek die derde opskrif en skryf die volgende kode direk daaronder:

As u die bladsy in 'n blaaier oopmaak, sal u sien dat u video onder die derde opskrif bygevoeg is. So eenvoudig! Net een lyn.

Kontroleer die pad na die videolêer om aan te pas waar u dit gevind het.

Die kontrole-opsie voeg 'n kontrolepaneel vir die video by.

As u wil hê dat u video onmiddellik moet speel nadat u die bladsy gelaai het, moet u die parameter "outoplay" byvoeg.

Hierdie metode voldoen aan die nuwe html5-standaarde en vind, volgens my, ontwikkelaars wat vandag toekomstige standaarde wil implementeer.

Daar is egter slaggate, byvoorbeeld verskillende blaaierondersteuning vir verskillende multimediaformate. Hierdie voorbeeld werk goed in alle nuwe blaaiers, maar nie in die Opera-blaaier nie. Om hierdie kode in Opera te laat werk, moet ons die videolêer omskakel in die Ogg Theora-formaat en die kode 'n bietjie verander om die blaaier 'n alternatiewe keuse te gee.

U kan die lêer met die aanlyn-convert.com/ -diens omskakel. Stoor die resulterende lêer na die omskakeling in die 'video'-lêergids en verander die kode vir die invoeging van die video in die volgende:

Nou sal die voorbeeld in die Opera-blaaier werk.

Daar is egter nog 'n vangs rakende ouer blaaiers wat nie HTML5-tags verstaan ​​nie. Ongelukkig verg die oorgang na nuwe standaarde ook die vermoë om oplossings te vind.

As 'n tag onbekend is met die blaaier, dan ignoreer dit dit eenvoudig, maar ignoreer dit nie die inhoud binne 'n element wat nie bekend is nie. Daarom kan ons 'n oplossing direk by ons etiket voeg om 'n video in te sluit. Die kode kan so lyk:

Met hierdie kode sal nuwer weergawes van blaaiers ons video-element suksesvol verwerk, en as 'n gebruiker skielik 'n bladsy met 'n ou blaaier oopmaak, sal die onbekende videomerk geïgnoreer word, maar die iframe-tag sal suksesvol verwerk word en die video van Youtube afgelaai word.

Miskien sal dit eindig. Ek herinner u daaraan dat u al die bronne kan aflaai deur op die "Bronne" -ikoon aan die begin van die artikel te klik, en u kan die werk van al drie voorbeelde sien deur op die "Demo" -ikoon op dieselfde plek te klik.

Laat u kommentaar en deel hierdie artikel met u vriende met behulp van die knoppies van sosiale netwerke. Ek sal baie dankbaar wees.

Teken ook in vir blogopdaterings. Vooruit is baie interessante en nuttige onderwerpe oor die skepping van webwerwe.

Ek wens u 'n goeie stemming en sukses met u werk!

Pin
Send
Share
Send
Send