Dacă ați găsit că navigați pe site-urile web media recent - servicii de streaming video, site-uri de știri, Facebook și așa mai departe - s-ar putea să fi observat o tendință referitoare la playerele lor video. Dacă defilam în jos o pagină în care este prezent un videoclip, acesta va pluti și va micșora playerul, lipindu-l în partea laterală a ferestrei de vizualizare în loc să-l piardă din vedere.
Acest lucru permite utilizatorilor să supravegheze videoclipul, în timp ce caută în același timp celălalt conținut. În acest tutorial vă voi arăta cum să recreați aceeași experiență - deci, fără alte idei, să începem!
Exemple
Doar ca suntem pe aceeași pagină, iată câteva exemple în sălbăticie:
Entertainment Weekly trimite videoclipurile sale în partea dreaptă jos a ferestrei de vizualizareVideoclipurile CNN plutesc în dreapta
Adăugarea videoclipului YouTube
În primul rând, să construim marcarea paginii împreună cu un videoclip YouTube. În mod crucial, încorporăm videoclipul cu enablejsapi = 1 parametru adăugat; acest parametru ne va permite să interacționăm cu videoclipul prin API-ul Youtube Iframe.
Lorem ipsum dolor sta amet.
Lorem ipsum dolor stați amet, consectetur adipisicing elit. Tenetur, minime!
În partea de jos a paginii, după cum puteți vedea, am adăugat și trei fișiere JavaScript; și anume jQuery, scriptul care ne oferă API-ul Youtube Iframe și main.js unde vom scrie JavaScript personalizat.
Coafura
Puteți să stylizați pagina în orice fel doriți, dar stilurile cu care suntem interesați în mod special aici sunt cele legate de videoclipul YouTube. Mai întâi, adăugăm stilurile pentru ca videoclipul YouTube să fie receptiv. Aceste reguli vor permite, în ultimă instanță, și containerul, .conținut media - video,, pentru a păstra raportul de aspect atunci când videoclipul YouTube este repoziționat.
Următoarele reguli CSS definesc modul în care ar trebui să plutească videoclipul YouTube. Folosim un selector .este lipicios--, pe care o vom adăuga dinamic în player, cu JavaScript, pentru a pluti în videoclip. Aceasta va scala, de asemenea, dimensiunea imaginii video, poziționați-o spre stânga și ajustați-o pentru câteva dimensiuni ale ferestrei de vizualizare.
Notă: trebuie să ajustați aceste proprietăți (dimensiunea și poziția) în funcție de audiență și de natura site-ului dvs. Dacă, de exemplu, conținutul site-ului dvs. Web este scris de la dreapta la stânga, acest lucru ar putea afecta locul unde credeți că este cel mai bine să plasați playerul video.
Acum, când încărcăm această pagină, putem vedea că videoclipul YouTube este afișat împreună cu conținutul nostru arbitrar.
Scrierea JavaScript
Am ajuns la partea interesantă a acestui tutorial; JavaScript! Al nostru main.js conținutul fișierului în acest moment este următorul:
jQuery (funcția ($) // scrie codul aici.);
Fragmentul de mai sus este egal cu $ (Document) .ready (), care ne permite să executăm JavaScript odată ce toate elementele de pe pagină au fost analizate și sunt disponibile.
Apoi, definim un număr de variabile. Am adăugat comentarii inline la fiecare variabilă, pentru a explica ce se întâmplă.
var $ fereastră = $ (fereastră); // 1. Obiect fereastră. var $ FeaturedMedia = $ ("# featured-media"); // 1. Containerul video. var $ featuredVideo = $ ("# featured-video"); // 2. Youtube Video. var jucător; // 3. obiect jucător Youtube. var top = $ featuredMedia.offset (). // 4. Poziția video din partea de sus a documentului; var offset = Math.floor (top + ($ featuredMedia.outerHeight () / 2)); // 5. ofset.
Youtube Iframe API
Așa cum am menționat mai devreme, am adăugat fișierul JavaScript care oferă acces la API-ul Iframe YouTube. Acest API, odată încărcat, va declanșa o funcție numită onYouTubeIframeAPIReady. Această funcție este disponibilă la nivel global. Și din moment ce scriptul nostru este imbricat sub jQuery (funcția ($) );, trebuie să ajungem la această funcție în fereastră obiect, după cum urmează:
window.onYouTubeIframeAPIReady = funcție () player = nou YT.Player ("featured-video", events: "onStateChange": onPlayerStateChange); ;
După cum puteți vedea în cadrul funcției, am selectat atributul ID al iframe precum și trecerea unei funcții numite onPlayerStateChange. Această funcție va fi declanșată atunci când playerul video YouTube va fi redat, întrerupt sau terminat.
onPlayerStateChange trece un obiect Eveniment care ne furnizează date cu caracter utilizabil. În acest caz, de exemplu, vom folosi evenimentul .date obiect pentru a obține starea videoclipului.
Starea videoclipului, după cum puteți vedea mai jos, este reprezentată cu un număr; 1 este atunci când se redă videoclipul, 2 este atunci când videoclipul este întrerupt și 3 este momentul când videoclipul se termină. Vom adăuga și elimina un nume de clasă în mod corespunzător atunci când statul este schimbat.
/ ** * Rulați atunci când starea video Youtube (redare, pauză, etc.) este schimbată. * * @param Object eveniment Evenimentul Object Youtube. * @return Void * / funcția onPlayerStateChange (eveniment) var isPlay = 1 === event.data; var isPause = 2 === event.data; var esteEnd = 0 === event.data; dacă (isPlay) $ featuredVideo.removeClass ("este întrerupt"); $ featuredVideo.toggleClass ("se joacă"); dacă (isPause) $ featuredVideo.removeClass ("is-play"); $ featuredVideo.toggleClass ("este întrerupt"); dacă (esteEnd) $ featuredVideo.removeClass ("se joacă", "este întrerupt");
Plutirea și lipirea videoclipului
Ceea ce urmează este codul care plutește și lipsește playerul video. Merită remarcat faptul că ar trebui să flotăm numai videoclipul când se redă videoclipul. Prin urmare, mai întâi verificăm iframe-ul pentru a vedea dacă acesta are se joacă înainte de a adăuga este lipicios- clasă:
Testați ceea ce ați făcut și ar trebui să vedeți lucrurile care funcționează!
Demo final
Concluzie
Au fost efectuate! Acest tutorial vizează să vă inițieze, oferindu-vă fundamentele despre cum să plutiți un videoclip similar cu site-urile media pe care le-ați văzut. Am folosit jQuery pentru a face codul mai simplu, mai scurt și mai ușor de înțeles pentru cititori în general.
Într-un proiect real, cu toate acestea, va trebui probabil să modificați detaliile aici și acolo, în funcție de complexitatea proiectului. De exemplu, este posibil să doriți să derulați funcția de defilare într-o funcție Throttling pentru a reduce apelurile funcționale. De asemenea, este posibil să fie necesar să ajustați poziția și dimensiunea videoclipului după aspectul site-ului pe un dispozitiv mobil, așa mai departe și așa mai departe.
Cu toate acestea, verificați demonstrația, redați videoclipul și derulați!
Share
Entertainment Weekly trimite videoclipurile sale în partea dreaptă jos a ferestrei de vizualizare
Videoclipurile CNN plutesc în dreapta
Accentsconagua
Demo final