Hvis du har funnet deg selv å surfe media nettsteder nylig video streaming tjenester, nyheter nettsteder, Facebook og så videre-du kanskje har lagt merke til en trend med hensyn til deres videospillere. Hvis vi ruller ned en side der en video er til stede, vil den flyte og krympe spilleren, holde den til siden av visningsporten i stedet for å miste den fra visningen.

Dette gjør det mulig for brukerne å holde øye med videoen mens de ser på det andre innholdet samtidig. I denne opplæringen skal jeg vise deg hvordan du gjenskaper den samme opplevelsen, så uten videre, la oss komme i gang!

eksempler

Bare så vi er alle på samme side, her er et par eksempler ute i naturen:

Underholdning Weekly sender sine videoer nederst til høyre i visningsportenCNN videoer flyter opp til høyre

Legger til YouTube Video

Til å begynne med, la oss bygge sidemarkeringen sammen med en YouTube-video. Viktigst, vi legger inn videoen med enablejsapi = 1 parameter lagt til; Denne parameteren tillater oss å samhandle med videoen via Youtube Iframe API.

 
  
Det er ikke noe problem.
 
Kjæresten er dum i sitt hjem, og er en avgjørende forfatter. Tenetur, minima!
  
  
   
 
 
 
    

På bunnen av siden, som du ser, har vi også lagt til tre JavaScript-filer; nemlig jQuery, skriptet som gir oss Youtube Iframe API, og main.js hvor vi skal skrive vår egendefinerte JavaScript.

styling

Du kan utforme siden som du ønsker, men stilene som vi er spesielt opptatt av, er de som er knyttet til YouTube-videoen. Først legger vi til stilene for å gjøre YouTube-videoen lydhør. Disse reglene vil til slutt også muliggjøre beholderen, .Content-media - video, for å beholde aspektforholdet når YouTube-videoen er reposisjonert.

.innholdsmedia - video bakgrunnsfarge: #ddd; skjerm: blokk; stilling: relativ; polstring: 0 0 56,25% 0;  .content-media - video iframe posisjon: absolutt; bunn: 0; venstre: 0; bredde: 100%; høyde: 100%; 

Flytende Video Player Styles

Våre neste CSS-regler definerer hvordan YouTube-videoen skal flyte. Vi bruker en velger .er klissete-, som vi vil legge til spilleren dynamisk med JavaScript, for å flyte videoen på siden. Dette vil også skalere videoen ned til størrelse, plassere den til venstre, og justere den for et par visningsstørrelser.

# featured-video overgang: bredde .2s brukervennlighet, høyde .2s brukervennlighet, forvandle .38s brukervennlighet;  / ** Bruk .sticky * / # featured-video.is-klebrig posisjon: fast; topp: 15px; venstre: auto; maksimal bredde: 280px; maks høyde: 158px; bredde: 280px; høyde: 158px;  @media skjerm og (min bredde: 1120px) # featured-video.is-klebrig transform: translateX (-80%);  @ media skjerm og (min bredde: 1300px) # featured-video.is-klebrig transform: translateX (-115%);  

Merk: Du bør justere disse egenskapene (størrelse og posisjon) i samsvar med publikum og arten av nettstedet ditt. Hvis for eksempel innholdet på nettstedet ditt er skrevet til høyre, kan det påvirke hvor du synes best å plassere videospilleren din.

Nå når vi laster inn denne siden, kan vi se at YouTube-videoen vises sammen med noen av vårt vilkårlig innhold.

Skriver JavaScript

Vi har kommet til den spennende delen av denne opplæringen; JavaScript! Våre main.js Filinnhold på dette punktet er som følger:

jQuery (funksjon ($) // Skriv kode her.);

Denne overdelen er lik den $ (Document) .ready (), som tillater oss å utføre JavaScript når alle elementene på siden er blitt analysert og er tilgjengelige.

Deretter definerer vi et antall variabler. Jeg har lagt inn kommentarer i siden av hver variabel, for å forklare hva som skjer.

var $ window = $ (vindu); // 1. Window Object. var $ featuredMedia = $ ("# featured-media"); // 1. Video Containeren. var $ featuredVideo = $ ("# featured-video"); // 2. Youtube Video. var spiller; // 3. Youtube-spillerobjekt. var toppen = $ featuredMedia.offset (). topp; // 4. Videoposisjonen fra toppen av dokumentet; var offset = Math.floor (topp + ($ featuredMedia.outerHeight () / 2)); // 5. offset.

Youtube Iframe API

Som nevnt tidligere har vi lagt til JavaScript-filen som gir tilgang til YouTube Iframe API. Denne API-en, når den er lastet, vil utløse en funksjon som heter onYouTubeIframeAPIReady. Denne funksjonen er tilgjengelig på globalt nivå. Og siden vårt skript er nestet under jQuery (funksjon ($) );, Vi må nå denne funksjonen ut i vindu objekt, som følger:

window.onYouTubeIframeAPIReady = function () player = new YT.Player ("featured-video", events: "onStateChange": onPlayerStateChange); ;

Som du kan se innenfor funksjonen, har vi valgt ID-attributtet til iframe så vel som å overføre en funksjon som heter onPlayerStateChange. Denne funksjonen utløses når YouTube videospilleren spilles, stoppes eller avsluttes.

De onPlayerStateChange sender et Event-objekt som gir oss nyttige data-deler. I dette tilfellet vil vi for eksempel bruke arrangementet .data Motta for å få videoen tilstand.

Videostaten, som du ser nedenfor, er representert med et nummer; 1 er når videoen spilles, 2 er når videoen er pauset, og 3 er når videoen slutter. Vi vil legge til og fjerne et klassenavn tilsvarende når staten endres.

/ ** * Kjør når Youtube-videotilstanden (spill, pause, etc.) endres. * * @param Object event Youtube-eventet. * @return Void * / function onPlayerStateChange (event) var isPlay = 1 === event.data; var isPause = 2 === event.data; var isEnd = 0 === event.data; hvis (isPlay) $ featuredVideo.removeClass ("er pauset"); $ featuredVideo.toggleClass ("spiller");  hvis (isPause) $ featuredVideo.removeClass ("spiller"); $ featuredVideo.toggleClass ("er pauset");  hvis (isEnd) $ featuredVideo.removeClass ("er å spille", "er pauset"); 

Flyter og stikker videoen

Det som følger er koden som skal flyte og holde fast vår videospiller. Det er verdt å merke seg at vi bare bør flyte videoen når videoen spilles. Derfor sjekker vi først iframe for å se om den har spiller klasse før du legger til er klissete klasse:

$ vinduet .on ("resize", funksjon () top = $ featuredMedia.offset (). toppen; offset = Math.floor (topp + ($ featuredMedia.outerHeight () / 2));) .on bla ", funksjon () $ featuredVideo.toggleClass (" is-sticky ", $ window.scrollTop ()> offset && $ featuredVideo.hasClass (" spiller ")););

Test hva du har gjort, og du bør se ting som fungerer!

Endelig demo

Konklusjon

Vi er ferdige! Denne opplæringen har som mål å komme i gang, og gir deg grunnleggende om hvordan du kan flyte en video på samme måte som medie nettsteder du kanskje har sett. Vi brukte jQuery til å gjøre koden enklere, kortere og lettere å forstå for lesere generelt.

I et ekte prosjekt, vil du sannsynligvis måtte tweak detaljer her og der avhengig av prosjektets kompleksitet. For eksempel vil du kanskje kjøre rullingsfunksjonen i en Throttling-funksjon for å redusere funksjonssamtaler. Det kan hende du må også justere videostilling og -størrelse etter nettstedoppsettet på en mobil enhet, så videre og så videre.

Ikke desto mindre, sjekk ut demoen, spill av videoen og få rulling!