lørdag, januar 23, 2021

HTML5 video – i baggrund + modal

Daily Rush Debat Programmering HTML5 video – i baggrund + modal

  • Forfatter
    Emne
  • #0

    Hyldig
    Bruger
    2.655 indlæg
    Offline

    Har vi nogle web front-end udviklere her på DR? kunne Kunne virkelig godt bruge lidt gode råd og hjælp til en løsning jeg er ved at sætte op.

    Skal have lavet en løsning, der er så “lightweight” som muligt til have en muted video auto-afspille i et “hero”-element i toppen af en side. Og så en “callout” oven på med en play-knap, som når trykkes på popper samme video op i fuld-browservindue modal (ikke fullscreen) og spiller samme video fra starten med lyd. Og når modal lukkes spiller bagrundvideo stadig videre uden lyd.

    Bygger sitet fra bunden så har rimelig mulig for at lave det meste..

    Har særlig brug for hjælp til:

    – Finde korrekte jQuery framework/biblioteker
    – Håndterer det ikke spiller baggrunds filmen, når den ikke er synlig fordi besøgende har scrollet videre ned på siden – hjælper vel på resource forbrug?
    – Stoppe baggrunds film når modal popper op, og fortsætter igen når den den lukkes – igen ressource forbrug tænker jeg.
    – Sikre browser ikke downloader den samme video to gange
    – Fallback til bare at vise baggrundsbillede, hvis video eller scripts, ikke understtøttes i browser. (Denne har jeg sku nok styr på i virkeligheden, ikke så svært at finde noget at detekte browser understøtelse og kun afvikle og style resten hvis supporteret, men nævner den alligevel)

    Bruger i øjeblikket et minimalt bootstrap baseret gridsystem at håndtere generelt responsivt layout og en smule jquery til en slider. Forvente at bruge HTML5 video og jquery modal løsning til video pop op-og jquery for noget af funktionaliteten.

    Har ikke brug for enkomplet kodet løsning, bare brug for nogle noget hjælp til at gå i den rigtige retning med at få funktionaliteten og optimering på plads.

Viser 1 kommentarer (af 1 i alt)
  • Forfatter
    Kommentarer
  • #1

    Krisp
    Bruger
    5.059 indlæg
    Offline

    Du kan bruge offset til at finde positionen af dit hero element ifht. toppen af siden:

    http://api.jquery.com/offset/

    Og du kan bruge scrollTop til at finde brugerens scroll position på siden:

    https://api.jquery.com/scrollTop/

    De to kan du sammenligne, for at finde ud af hvornår du skal pause videoen.

    Her er et lille eksempel på hvordan du kan afspille og pause din video:
    http://www.w3schools.com/tags/av_met_pause.asp

    Steam: Krisp89 - Origin: Krisp1989 - BattleTag: Krisp#2319

Viser 1 kommentarer (af 1 i alt)
  • Du skal være logget ind for at kommentere på dette indlæg.