PULSAR PLAY
Progetto FREE
I pulsanti "Play Video" (o "Pulsar Play") sono elementi interattivi che si trovano tipicamente su siti web o applicazioni per avviare la riproduzione di contenuti video. Questi pulsanti hanno uno scopo sia funzionale che estetico.
Cos'è un pulsante "Play Video"?
È un elemento grafico, generalmente riconoscibile da un'icona a forma di triangolo (freccia) che punta a destra, posizionato sopra l'immagine di anteprima (thumbnail) di un video.
- Può essere statico (un'icona semplice) o animato per attirare l'attenzione.
- Quando viene cliccato o toccato, avvia la riproduzione del video.
Perché si usano i pulsanti "Play Video"?
1. Migliorare l'Esperienza Utente (UX):
- Chiarezza: Indicano chiaramente agli utenti che possono guardare un video.
- Controllo: Consentono agli utenti di decidere quando avviare il contenuto, evitando riproduzioni automatiche indesiderate.
2. Design e Estetica:
- Focalizzazione: Posizionare il pulsante sopra il video guida l'attenzione degli utenti verso il contenuto.
- Professionale: Un pulsante ben progettato rende l'interfaccia visivamente più ordinata e accattivante.
3. Riduzione del Carico di Dati:
- Invece di avviare automaticamente il video (che consuma dati e risorse), il pulsante consente all'utente di scegliere se riprodurlo, riducendo il carico sulla rete e migliorando le prestazioni del sito.
4. Aumento del Coinvolgimento:
- L'immagine di anteprima insieme al pulsante può suscitare curiosità, incentivando l'utente a cliccare per vedere il contenuto.
5. Accessibilità e Compatibilità:
- I pulsanti Play ben implementati sono facilmente utilizzabili su dispositivi mobili e desktop.
- Possono essere progettati per supportare standard di accessibilità, come l'uso tramite tastiera o screen reader.
Consigli per un buon pulsante "Play Video":
- Dimensioni e Posizionamento: Deve essere abbastanza grande da essere facilmente cliccabile ma non così grande da oscurare il contenuto.
- Design Intuitivo: L'icona del triangolo è un simbolo universalmente riconosciuto per "play".
- Feedback Visivo: Aggiungere un effetto hover o un'animazione per rendere il pulsante più interattivo.
- Contrasto Visivo: Assicurati che il pulsante sia ben visibile rispetto all'immagine di sfondo.
- Descrizioni Alternative: Per migliorare l'accessibilità, aggiungi un testo alternativo o una descrizione per screen reader.
DIFFICOLTÀ - ESPERTO PER L'INSERIMENTO DI CODICE EXTRA
DIFFICOLTÀ ELABORAZIONE VIDEO - DIPENDE DALLA VOSTRA PREPARAZIONE
MATERIALE OCCORRENTE:
- Un programma di video editing se dovete richiamare un vostro video. Non necessario se dovete richiamare un video qualsiasi su you tube
- Nel caso di un vostro video elaborare le dimensioni in 1920x1280 formato mpeg4
- Un video caricato su you-tube da voi prodotto o come riferimento ad un video che volete
- Una pagina dove far vedere il video
- Una pagina dove inserire il pulsante PULSAR-PLAY
- un oggetto HTML nel progetto per l'inserimento del pulsante
E L'Inserimento di codice extra.
STEEP 1
ELABORATE IL VOSTRO VIDEO
- Salta questa parte se il video non è vostro ma uno qualsiasi di you-tube
- Prenderemo in esame un video fatto da noi.
- Con un programma di video editing elaborate un vostro video in HD 1920x1280 formato mpeg4
- Caricate il video sul vostro canale you-tube
- Mandatelo in esecuzione e sul browser fate un copia-incolla del link video.
STEEP 2
- Create una pagina dove andrete a mettere il vostro video con l'Oggetto video
- Inserite nell'oggetto video il percorso copiato da you-tube
Salvate questa pagina ,dategli un nome e con le opzioni e NASCONDETELA! Noi l'abbiamo chiamata publivideo.html
STEEP 3
- Ora Aprite la pagina del progetto ( o una pagina qualsiasi del vostro progetto) che dovrà contenere il ► PULSAR PLAY.
- Inserite un oggetto HTML su questa pagina
- Recatevi su CODICE HTML
- Inserite i due listati di codice che seguono ▼
- In neretto la pagina da aprire ma voi dovete inserire la vostra.
INSERIRE SU CODICE ▼ | ||
<div class="play-button" onclick="window.location.href='publivideo.html'"> <div class="pulse-ring"></div> <div class="pulse-ring"></div> <div class="play-icon"></div> </div> |
INSERIRE SU "ESPERTO" ▼ | ||
/* Stile per il contenitore principale del pulsante */ .play-button { position: relative; width: 80px; height: 80px; background-color: #ff0000; /* Colore rosso */ border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); overflow: visible; /* Permette di vedere gli anelli */ } /* Stile per l'icona "play" al centro */ .play-icon { position: relative; width: 0; height: 0; border-left: 12px solid white; border-top: 8px solid transparent; border-bottom: 8px solid transparent; z-index: 2; /* Sopra i cerchi concentrici */ } /* Cerchi concentrici per l'effetto di pulsazione */ .pulse-ring { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%); border: 2px solid rgba(255, 0, 0, 0.5); /* Cerchio rosso trasparente */ border-radius: 50%; z-index: 1; animation: pulse 1.5s infinite ease-out; } /* Il secondo cerchio ha un leggero ritardo per l'effetto concentrico */ .pulse-ring:nth-child(2) { animation-delay: 0.75s; } /* Animazione per i cerchi concentrici */ @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } } /* Effetto hover */ .play-button:hover { transform: scale(1.1); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); } |
STEEP 4
Salvate tutto
Ora passate al passo 3 della pagina corrente ove avete inserito l'oggetto HTML e fare click su MARGINI e impostate sia quelli esterni che interni TUTTI A 35 Potete aumentare questo valore se i cerchi si presentano tagliati sino a trovare la combinazione giusta.
SALVATE TUTTO
Ed ecco come si presenterà il vostro pulsante. ▼ Fare click su di esso per mandare in esecuzione la seconda pagina creata ossia puplivideo.htm o quella da voi creata
COMMENTA ▼
Non sono presenti ancora recensioni.