Back to top

Autore Topic: [RISOLTO] Inserimento video HTML 5  (Letto 4387 volte)

Offline claudio65

  • Appassionato
  • ***
  • Post: 752
  • Sesso: Maschio
  • Buon forum a tutti
    • Mostra profilo
[RISOLTO] Inserimento video HTML 5
« il: 02 Dic 2017, 13:26:20 »
Ciao a tutti,
 è un po’ che giro intorno al problema ma probabilmente mi sfugge la classica banalità.
Ho inserito in un modulo HTML (personalizzato) un video con HTML 5 che va in autoplay ad al temine tramite l’attributo poster termina con un’immagine fissa  come potete vedere presso questo link http://ilmorettodigavi.it/
Il codice HTML5 utilizzato è il seguente
Codice: [Seleziona]
<video width="100%" autoplay="autoplay" preload="(none,auto,metadata)" poster="/images/Video/Cover_video_home_hd.png">
    <source src="/images/Video/moretto.mp4" type="video/mp4" />
  </video>

A questo punto ho ripetuto l'operazione in un'altra pagina dello stesso sito http://ilmorettodigavi.it/prodotto.html inserendo il seguente codice:
Codice: [Seleziona]
<video width="100%" autoplay="autoplay" preload="(none,auto,metadata)" poster="/images/Video_prodotto/Cover_video_prodotto_hd.png">
    <source src="/images/Video_prodotto/Moretto_Prodotto.mp4" type="video/mp4" />

  </video>
Naturalmente in questo successivo codice cambia il path dell'immagine nell'attributo poster, quello del video e i nomi dei 2 files.
Come potrete vedere però dal link http://ilmorettodigavi.it/prodotto.html il video viene visualizzato regolarmente ma non trovo il verso di far visualizzare l'immagine tramite l'attributo poster a fine video come accade per l'altra pagina.
Dove sbaglio?


Che la bella ragazza del primo video sia più interessante per HTML5  ;D ;D ;D ;D ;D
« Ultima modifica: 02 Dic 2017, 23:39:46 da claudio65 »

Offline danielecr

  • Abituale
  • ****
  • Post: 1357
    • Mostra profilo
Re:Inserimento video HTML 5
« Risposta #1 il: 02 Dic 2017, 13:43:55 »
10 su 10 alla ragazza del video :)
Non ho mai usato l'attributo poster, ma sei sicuro che l'immagine indicata si visualizzi al termine della riproduzione del video?

Da w3schools leggo:
Citazione
The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.

Quindi visto che va in autoplay, dovresti visualizzare l'immagine durante il caricamento del video, non alla fine. O no?

Esempio qui:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_poster
« Ultima modifica: 02 Dic 2017, 13:46:09 da danielecr »

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Inserimento video HTML 5
« Risposta #2 il: 02 Dic 2017, 14:03:55 »
Scusa ma io da tab e browser chrome non vedo nessun video.

Offline claudio65

  • Appassionato
  • ***
  • Post: 752
  • Sesso: Maschio
  • Buon forum a tutti
    • Mostra profilo
Re:Inserimento video HTML 5
« Risposta #3 il: 02 Dic 2017, 14:46:14 »

Ero certo che la ragazza avrebbe riscosso un buon successo 8)


Si Tomtom da tablet per renderlo visibile presumo che dovrò aggiungere:

Codice: [Seleziona]
<source src="../video-html5/nomefile.mp4" type="video/mp4" />
    <source src="../video-html5/nomefile.ogv" type="video/ogg" />
    <source src="../video-html5/nomefile.webm" type="video/webm" />
 
e relativi file video nei formati ogg e webm che debbo ancora convertire da mp4.



Concordo con la tua affermazione Dani "Quindi visto che va in autoplay, dovresti visualizzare l'immagine durante il caricamento del video, non alla fine. O no?" infatti al primo caricamento della pagina, a successivi no per questioni di cache, si vede per alcuni secondi l'immagine sia in un video che nell'altro, ma mentre nella home page a fine esecuzione video torna l'immagine fissa nella pagina "prodotto" no.
I codici di entrambe le pagine sono pressoché identici, non capisco perché si comportino diversamente




Offline danielecr

  • Abituale
  • ****
  • Post: 1357
    • Mostra profilo
Re:Inserimento video HTML 5
« Risposta #4 il: 02 Dic 2017, 14:55:44 »
Ciò accade perchè nel primo video l'ultimo frame coincide con la tua immagine poster, mentre nel secondo video l'ultimo frame è nero.
Se non vuoi giocare con javascript la soluzione più veloce è aggiungere al secondo video un frame finale con l'immagine che vuoi.

Aggiungo che il primo video non si riavvolge al termine! Così come il secondo.
« Ultima modifica: 02 Dic 2017, 15:03:49 da danielecr »

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Inserimento video HTML 5
« Risposta #5 il: 02 Dic 2017, 14:59:38 »
Prova con percorso assoluto della immagine, forse quello relativo cambia in base all'articolo.

Offline claudio65

  • Appassionato
  • ***
  • Post: 752
  • Sesso: Maschio
  • Buon forum a tutti
    • Mostra profilo
Re:Inserimento video HTML 5
« Risposta #6 il: 02 Dic 2017, 15:08:20 »
Grazie, proverò entrambe i suggerimenti. Naturalmente darò conto sul post a beneficio di tutti gli amici del forum.

Offline claudio65

  • Appassionato
  • ***
  • Post: 752
  • Sesso: Maschio
  • Buon forum a tutti
    • Mostra profilo
Re:Inserimento video HTML 5
« Risposta #7 il: 02 Dic 2017, 23:39:03 »
Bene, ho risolto il problema dell’immagine finale nel video, in effetti mi ero concentrato sul codice ma molto più banalmente come ha detto danielecr "nel secondo video l'ultimo frame era nero".

Ho semplicemente aggiunto un ultimo frame con l’immagine e quindi ottenuto quanto volevo.

Invece per quanto riguarda la visualizzazione da mobile devices il discorso è un poco più problematico.
La mia idea iniziale era quella di far apparire il video senza controlli, ma da quanto mi sia dato di sapere, ci sono problemi a far digerire il comando “autoplay” sia ad Androd che iOS, lo si riesce a far accettare se si da “autoplay muted”, ma in questo caso i video hanno una pista audio, ergo ho escluso tale possibilità.

Non mi rimane che utilizzare l’attributo Controls in modo tale che da mobile si possa dare il play, anche se sul mio smartphone Android, utilizzando Firefox non necessita in quanto va in autoplay.

Il cross browsing e il cross OS è sempre un ginepraio.

Non so come si visualizza con iOS in quanto non dispongo di alcun devices della mela, se qualcuno mi riferisce in merito mi usa una cortesia.

Comunque sia il codice che ho introdotto è il seguente:
Codice: [Seleziona]
<video width="100%" autoplay="autoplay" preload="(none,auto,metadata)"poster="/images/Video/Cover_video_home_hd.png"controls>
    <source src="/images/Video/moretto.mp4" type="video/mp4" />
   <source src="moretto.webm" type="video/webm">
   <source src="moretto.ogv" type="video/ogg">
  </video>

« Ultima modifica: 02 Dic 2017, 23:44:42 da claudio65 »

Offline danielecr

  • Abituale
  • ****
  • Post: 1357
    • Mostra profilo
Re:[RISOLTO] Inserimento video HTML 5
« Risposta #8 il: 03 Dic 2017, 12:38:00 »
Ciao Claudio,
premesso che non sono così pazzo da spendere una fortuna per un iphone  :o
ho un vecchio mac book pro 2008 con xcode e ios simulator: con il mio os posso al massimo simulare un ios 9.2, iphone 6 plus.

Ciò che capita è che con safari non parte l'autoplay, ok l'avevi messo in conto; tuttavia, quando si avvia il video manualmente questo va a tutto schermo (in entrambi i link che hai fornito), e questo forse non è l'effetto che vuoi.

Questo comportamento su safari+iphone/ipod è confermato anche su diversi post su stackoverflow.

Nel caso, proverei con l'attributo playsinline: dai un'occhiata qui:
https://webkit.org/blog/6784/new-video-policies-for-ios/

Su ipad 2, sempre ios 9.2 (ios simulator) e safari come prima non parte l'autoplay, ma il video resta al suo posto, non va a tutto schermo.
« Ultima modifica: 03 Dic 2017, 12:52:34 da danielecr »

Offline claudio65

  • Appassionato
  • ***
  • Post: 752
  • Sesso: Maschio
  • Buon forum a tutti
    • Mostra profilo
Re:[RISOLTO] Inserimento video HTML 5
« Risposta #9 il: 03 Dic 2017, 17:34:08 »
Ciao Daniele,
concordo 100% su iPhone tanto che ho coniato una battuta che recita "in origine ci hanno dato l'iPod, poi l'iPhone, poi l'iPad, finirà che ci daranno anche dell' iDiot"  ;D ;D ;D  Personalmente con un S III Neo vado alla grande per le mie esigenze. E poi nutro una certa antipatia per la "filosofia" della Mela, con rispetto per chi possiede Mac o iPhone, non amo mai discriminare o nutrire preconcetti per persone e/o cose.
Comunque anche altri smartphone tipo S8 ecc. hanno dei prezzi non concepibili a mio modesto parere, quello che non sopporto di Mac sono i loro sistemi chiusi, il rapporto prezzo qualità e l'esclusività che molto abilmente hanno saputo dare ai loro prodotti, come recitava una pubblicità di molti anni fa riguardante un'automobile Lancia "piace alla gente che piace".


Passando al nostro HTML 5 grazie per il riscontro, si avevo visto già in precedenza l'attributo playsinline ma avevo inteso che servisse all'autoplay per iOS, mentre al link da te indicatomi è chiaramente esposto che "On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins" , ergo l'ho aggiunto l'attributo.
Ora continua ad andare in fulscreen?


Qualche anno fa avevo installato  Virtual Box Oracle vedrò di reinstallarlo anche se con esso posso solo virtualizzare Mac e non iPhone iPad.


Offline danielecr

  • Abituale
  • ****
  • Post: 1357
    • Mostra profilo
Re:[RISOLTO] Inserimento video HTML 5
« Risposta #10 il: 03 Dic 2017, 18:19:15 »
Concordo,
a fine 2008 ho voluto acquistare questo macbook pro dall'inghilterra, pagato 1799 euro al posto che 2199 qui in Italia: era un ottimo portatile, tuttora va ancora benone. A parte che ho dovuto cambiare dopo 2 anni dall'acquisto, fortunatamente in garanzia, la scheda logica (900 euro e passa) e dopo 3 anni, sempre in garanzia estesa fortunatamente, tutto il top, compresa tastiera e trackpad: questo perchè la piattina che collega la scheda logica alla tastiera e al trackpad era a diretto contatto con la batteria e scalda una volta, scalda 2 e scalda 3, la piattina parte...e al posto di cambiare una piattina da 7 euro ti cambiano tutto il top a 400 euro... ::)
Quando la batteria è partita dopo 4 anni, visto che costava 160 euro originale, ho deciso che si sarebbe trasformato in un pc fisso  ;D e da allora non ho più avuto problemi. In conclusione, un buon laptop, ma costa troppo, senza parlare che per la gamma workstation il mac pro fa ridere a confronto della concorrenza.


A parte ciò, da quello che ho letto velocemente, il playsinline dovrebbe funzionare da ios 10, io purtroppo riesco a simulare fino a ios 9.2, quindi con i device più vecchi o comunque non aggiornati, il video apparirà sempre a schermo intero. Devi aspettare qualcuno con un iphone più nuovo del mio simulatore  ;D
Che io sappia nulla da fare per questi device+safari, lascerei comunque il playsinline per quelli più nuovi.
« Ultima modifica: 03 Dic 2017, 18:20:57 da danielecr »

Offline claudio65

  • Appassionato
  • ***
  • Post: 752
  • Sesso: Maschio
  • Buon forum a tutti
    • Mostra profilo
Re:[RISOLTO] Inserimento video HTML 5
« Risposta #11 il: 03 Dic 2017, 19:06:07 »
No problem ho  più di un cliente che da in dotazione al proprio personale iPad e iPhone verificherò tramite loro.
Comunque direi che allo stato dell'arte con l'attuale codice si può ritenere soddisfacente il risultato sulla maggioranza dei devices.
Quando acquistai il mio attuale desktop i Mac venivano commercializzati con i3 e 4 GB di ram il mio aveva i7 e 12 GB di ram e costava circa la metà, certo il Mac non ha case e risulta più elegante ma vistosi che ci debbo lavorare al massimo metto qualche bel soprammobile in ufficio per renderlo elegante  :D 

 



Web Design Bolzano Kreatif