Om du har funnit dig själv, bläddrar du på mediawebbplatser med ny video-streaming, nyhetswebbplatser, Facebook och så vidare - du kanske har märkt en trend när det gäller deras videospelare. Om vi rullar ner en sida där en video är närvarande, kommer den att flyta och krympa spelaren, hålla den vid sidan av visningsporten istället för att förlora den från vy.
Detta gör det möjligt för användarna att hålla koll på videon samtidigt som man tittar igenom det andra innehållet samtidigt. I denna handledning kommer jag att visa dig hur du återskapar samma upplevelse, så utan vidare, låt oss börja!
exempel
Bara så är vi alla på samma sida, här är några exempel ute i naturen:
Underhållning Weekly skickar sina videoklipp längst ner till höger i visningsportenCNN-videor flyter upp till höger
Lägger till YouTube Video
Till att börja med, låt oss bygga sidmärkningen tillsammans med en YouTube-video. Avgörande, vi bäddar in videon med enablejsapi = 1 parameter tillsatt Denna parameter tillåter oss att interagera med videon via Youtube Iframe API.
Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, minima!
Nederst på sidan, som vi kan se, har vi också lagt till tre JavaScript-filer. nämligen jQuery, skriptet som ger oss Youtube Iframe API och main.js där vi ska skriva vår anpassade JavaScript.
styling
Du kan utforma sidan som du vill, men de stilar som vi är specifikt berörda av här är de som är knutna till YouTube-videon. Först lägger vi till stilar för att göra YouTube-videon mottaglig. Dessa regler kommer till sist även att möjliggöra behållaren, .innehålls-media - video, för att behålla sitt bildförhållande när YouTube-videoen flyttas om.
.innehålls media - video bakgrundsfärg: #ddd; display: block; position: relativ; vaddering: 0 0 56,25% 0; .content-media - video iframe position: absolute; botten: 0; vänster: 0; bredd: 100%; höjd: 100%;
Floating Video Player Styles
Våra nästa CSS-regler definierar hur YouTube-videon ska flyta. Vi använder en väljare .är-klibbig-, som vi lägger till spelaren dynamiskt med JavaScript, för att flyta videon på sidan. Detta kommer även att skala upp videon i storlek, placera den till vänster och justera den för ett par visningsstorlekar.
Notera: Du bör justera dessa egenskaper (storlek och position) i enlighet med din publik och din webbplats. Om till exempel ditt webbplatsinnehåll skrivs höger till vänster, kan det påverka var du tycker bäst att placera din videospelare.
Nu när vi laddar den här sidan kan vi se YouTube-videon visas tillsammans med några av våra godtyckliga innehåll.
Skriva JavaScript
Vi har kommit till den spännande delen av denna handledning; JavaScript! Vår main.js filinnehåll på denna punkt är följande:
jQuery (funktion ($) // Skriv kod här.);
Detta ovanstående utdrag motsvarar $ (Dokument) .ready (), som tillåter oss att utföra JavaScript när alla element på sidan har analyserats och är tillgängliga.
Därefter definierar vi ett antal variabler. Jag har lagt till inline kommentarer till sidan av varje variabel för att förklara vad som händer.
var $ fönster = $ (fönster); // 1. Fönsterobjekt. var $ featuredMedia = $ ("# featured-media"); // 1. Videokontainern. var $ featuredVideo = $ ("# featured-video"); // 2. Youtube Video. var spelare // 3. Youtube-spelareobjekt. var topp = $ featuredMedia.offset (). top; // 4. Videopositionen från toppen av dokumentet; var offset = Math.floor (topp + ($ featuredMedia.outerHeight () / 2)); // 5. offset.
Youtube Iframe API
Som tidigare nämnts har vi lagt till JavaScript-filen som ger tillgång till YouTube Iframe API. Detta API, en gång laddat, kommer att utlösa en namngiven funktion onYouTubeIframeAPIReady. Denna funktion är tillgänglig på global nivå. Och eftersom vårt manus är nestat under jQuery (funktion ($) );, Vi måste nå denna funktion i fönster objekt, enligt följande:
window.onYouTubeIframeAPIReady = function () player = new YT.Player ("featured-video", events: "onStateChange": onPlayerStateChange); ;
Som du kan se inom funktionen har vi valt ID-attributet för iframe såväl som att överföra en angiven funktion onPlayerStateChange. Den här funktionen utlöses när YouTube-videospelaren spelas upp, pausas eller avslutas.
De onPlayerStateChange skickar ett Event-objekt som ger oss användbara data. I det här fallet använder vi till exempel evenemanget .data föremål för att få videotillståndet.
Videotillståndet, som du kan se nedan, är representerat med ett nummer; 1 är när videon spelas, 2 är när videon är pausad och 3 är när videon slutar Vi lägger till och tar bort ett klassnamn i enlighet därmed när staten ändras.
/ ** * Kör när Youtube-videotillståndet (spel, paus, etc.) ändras. * * @param Object händelse Youtube Object Event. * @return Void * / function onPlayerStateChange (händelse) var isPlay = 1 === event.data; var isPause = 2 === event.data; var isEnd = 0 === event.data; om (isPlay) $ featuredVideo.removeClass ("är pausad"); $ featuredVideo.toggleClass ("spelar"); om (isPause) $ featuredVideo.removeClass ("spelar"); $ featuredVideo.toggleClass ("är pausad"); om (isEnd) $ featuredVideo.removeClass ("spelas", "är pausad");
Flyter och klibbar videon
Vad följer är koden att flyta och hålla fast vid vår videospelare. Det är värt att notera att vi bara ska flyta videon när videon spelas. Därför kontrollerar vi först iframen för att se om den har spelar klass innan du lägger till är-klibbig klass:
Testa vad du har gjort och du bör se saker som fungerar!
Slutlig demonstration
Slutsats
Var gjort! Denna handledning syftar till att komma igång, vilket ger dig grunden för hur du kan flyta en video på samma sätt som mediewebbplatser du kanske har sett. Vi använde jQuery för att göra koden enklare, kortare och lättare att förstå för läsare i allmänhet.
I ett verkligt projekt kommer du troligtvis att behöva tweak detaljer här och där beroende på projektets komplexitet. Du kanske till exempel vill köra rullningsfunktionen i en Throttling-funktion för att minska funktionssamtal. Du kanske också behöver justera videopositionen och storleken efter platslayouten på en mobilenhet, så vidare och så vidare.
Men kolla in demoen, spela upp videon och bläddra!
Share
Underhållning Weekly skickar sina videoklipp längst ner till höger i visningsporten
CNN-videor flyter upp till höger
Accentsconagua
Slutlig demonstration