Hvordan bygger du inn videoer i en Pop-Up med Javascript

Hvordan bygger du inn videoer i en Pop-Up med Javascript


Javascript gir webutviklere å generere innhold dynamisk innenfor gjeldende nettleservinduet eller i et nytt nettleservindu. Når et nytt nettleservindu viser over den nåværende, er det som kalles en "pop-up". Pop-ups kan vise en Web-innhold, inkludert videoer. Den "window.open ()" -funksjonen konfigurert uten et filnavn og med parameteren "newwin" skaper skaper pop-up. Standarden HTML (Hypertext Markup Language) tag "<embed>" laster deretter videoen inn i pop-up for visning.

Bruksanvisning

1 Start ren tekst editor program som er tilgjengelig på datamaskinen.

2 Skriv inn følgende kode inn i teksteditor.

<Html>
<Head>
</ Head>

<Script type = "text / javascript">
funksjon openpopupvideo () {

// Dette åpner opp en pop-up vindu du kan fylle med videoen.
// Endre høyde, bredde og video navn som passer din bestemt video
windowhandle = window.open ( "", "newwin", "height = 350, width = 350");
windowhandle.document.write ( '<title> Min Video </ title>');
windowhandle.document.write ( '<embed src = "yourvideo.avi" />');
}

</ Script>
<Input type = "button" onclick = "openpopupvideo ();" value = "Klikk her for å se pop-up" />
</ Body>
</ Html>

3 Klikk på Fil-menyen. Velg "Lagre" alternativet. Lagre under filnavnet "test.html" i samme mappe som videofilen.

4 Start nettleseren som er tilgjengelig på datamaskinen. Klikk på "File" menyen og velg "Åpne fil".

5 Finn filen "test.html" nettopp opprettet, og velg den med musen. Klikk "Open".

6 Klikk på knappen som sier "Klikk her for å se Pop-Up".

Hint

  • HTML5 har en tag spesielt for innebygging videoer. En fordel denne nye koden gir er muligheten til å tilby ulike versjoner av videoen for seere som av en eller annen grunn er begrenset i formattyper de kan spille. Her skriptet ovenfor er modifisert til å bruke HTML5 video tag. Besøkende til nettstedet ditt med WebM, Ogg Theora, MP4, eller AVI-spillere og kodeker installert kan se videoen like godt.
  • <Script type = "text / javascript">
  • funksjon openpopupvideo () {
  • windowhandle = window.open ( "", "newwin", "height = 350, width = 350");
  • windowhandle.document.write ( '<videokontrollene = "styrer"');
  • windowhandle.document.write ( '<source src =' mymovie.webm 'type = "video / WebM, codecs =" vp8.0, vorbis "'> ');
  • OpenWindow.document.write ( '<source src =' mymovie.ogv 'type = "video / ogg, codecs =" Theora, vorbis "'> ');
  • OpenWindow.document.write ( '<source src =' mymovie.mp4 'type =' video / mp4, kodeker = "avc1.4D401E, mp4a.40.2" '>');
  • OpenWindow.document.write ( '<source src = "mymovie.avi" type = "video / avi" />
  • OpenWindow.document.write ( '</ video>');
  • }
  • </ Script>