Cambiare da flash a nuovi tag video per visualizzazione in smartphone

Printable View

24-07-2018, 09.22.23

Cambiare da flash a nuovi tag video per visualizzazione in smartphone

Salve,

vorrei eliminare la modalità flash con cui vedo i video, e adeguare a nuove direttive di HTML5.

Il sito è in XHTML e chiedo se è possibile inserire i video in tag come "video" senza che debba adeguare tutto il codice del sito.
Il problema è che dai cellulari non si vedono questi files in .flv e pensavo di fare conversione a .mp4 o altro formato che mi si possa suggerire.

Codice HTML:

<div id="contenuto"> <div id="colonna_cx"> <div id="video"> <object width="900" height="350"> <param name="video" value="videoSimq.swf"> <embed src="videoSimq.swf" width="900" height="350"> </embed> </object> </div> </div> <div class="clear"></div> </div>

Avrei trovato questo:

Codice HTML:

<video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>

Non so utilizarlo in modo che funzioni, non so togliere il codice che fa capo a flash. Nel css ho trovato solo una voce:id video.
Grazie e buona giornata
26-07-2018, 13.52.59
alemoppo

Puoi mostrare la pagina dove hai provato ad inserire il video con <video>?

Valuta anche l'opzione di caricare i video su youtube e incorporarli tramite l'apposito codice fornito da google stesso.

Ciao!
26-07-2018, 15.33.24

Ok grazie, questa idea mi piace perché magari per me sarebbe più facile.

L'unico problema concettuale per me, visto che non ho confidenza con codice dinamico, è che vedo degli alloggi ,o div che siano, per le anteprima dei video, e una sola finestra che effettivamente li visualizza. Quindi cìoè un sistema di clic che avrei capito fa capo a programmazione flash. Se invece carico i video su YouTube, e chiedo se vanno convertiti prima in mp4, significa che devo creare un contenitore che abbia sei spazi per altrettanti video che si aprono nella stessa finestra in cui sta l'anteprima? Spero di essermi espressa bene abbastanza. Grazie Alemoppo
26-07-2018, 15.37.46
alemoppo

Scusami mi sono perso. Vorresti inserire 6 video in una pagina? (è comunque fattibile).

Prova, poi quando hai qualche problema chiedi pure (mostrando la pagina).

Ciao!
26-07-2018, 16.02.58

Chiedevo se devo creare sei alloggi per sei video, come è la situazione ora,una finestra visualizza, le altre se si cliccano aprono sempre nella prima finestra a sinistra. Codice in flash immagino che non so modificare. Altra soluzione solo in html?

http://www.newquantum.altervista.org/video.html
26-07-2018, 16.08.22
alemoppo

Ho appena attivato Flash.
In generale ti sconsiglio di utilizzare Flash e di passare ad una soluzione HTML.

Se vuoi una cosa simile a come hai adesso in flash, dovresti utilizzare qualche script già fatto (o se sei in grado realizzare qualcosa in javascript da te). Prova a cercare "videogallery jquery", dovresti trovare sicuramente qualcosa.

Ciao!
26-07-2018, 16.57.05

Non sono in grado di farla da me, ma nel link che mi ha mandato ho visto qualcosa che mi piace. Proverò ad utilizzare uno script già pronto. Grazie mille per l’aiuto
30-07-2018, 05.02.30

Salve,

ho voluto iniziare a provare qualcosa di pronto in java script. Ho convertito il video in .mp4 , la pagina col nuovo codice lo carica, ma l'audio è normale mentre il video è molto rallentato rispetto ad esso. Vorrei cominciare a capire da cosa dipende.
Nel cellulare, rispetto a prima, vedo ora la finestra del video e i quattro bottoni che ne regolano la visione, ma continuo a non aprire il video stesso.

Problema a parte è che ho notato che quando apro alcune pagine dal top menù del sito le immagini testata sgranano un attimo prima di vedersi normalmente. Come mai? Non ricordo di averlo notato prima, nemmeno quì mi so orientare riguardo l'origine del problema. Grazie sempre, buona giornata
30-07-2018, 08.41.11
alemoppo

Citazione:

Originalmente inviato da newquantum

ma l'audio è normale mentre il video è molto rallentato rispetto ad esso. Vorrei cominciare a capire da cosa dipende.

Come è stato convertito il video? Probabilmente la causa è la conversione. Hai modo di riprodurre il video da PC o da altro dispositivo (senza includerlo in una pagina html) per vedere se si tratta del problema della conversione?

Citazione:

Originalmente inviato da newquantum

Nel cellulare, rispetto a prima, vedo ora la finestra del video e i quattro bottoni che ne regolano la visione, ma continuo a non aprire il video stesso.

Purtroppo nei cellulari quel codice non funziona molto bene: è necessario premere sul pulsante "play/stop" per poter visualizzare il video.
È però possibile risolvere il problema impostando una immagine di sfondo dell'elemento: ad esempio potresti impostare il primo fotogramma del video oppure una immagine con un simbolo "play" (o qualsiasi altra immagine).
Per impostare lo sfondo potresti farlo aggiungendo tra i tag <head> e </head> questo codice:

Codice:

<style type="text/css"> video { background-image: url("image.png"); } </style>

dove "image.png" è l'immagine di cui parlavo che deve essere presente nel sito. Ovviamente è possibile modificare nome ed estensione, può anche essere "immagine.jpg" etc.
Comunque, la riga:

Codice:

<source src="mov_bbb.ogg" type="video/ogg">

non è necessaria in quanto il video "mov_bbb.ogg" non esiste.

Citazione:

Originalmente inviato da newquantum

Problema a parte è che ho notato che quando apro alcune pagine dal top menù del sito le immagini testata sgranano un attimo prima di vedersi normalmente. Come mai? Non ricordo di averlo notato prima, nemmeno quì mi so orientare riguardo l'origine del problema.

Questo fatto non credo sia collegato con il video. Visitando il tuo sito non noto nulla di strano, ma quell'effetto potrebbe essere dato dal rendering della pagina web nel tuo dispositivo oppure dalla connessione internet (hai modo di vedere se questo fenomeno termina proprio al termine del caricamento della pagina?)

Ciao!
31-07-2018, 07.29.46

Buongiorno Alemoppo, è come dici tu, il video non è stato convertito bene, gli altri della serie invece si, e ora vengono visualizzati.

Anche dal cellulare!! cosa che volevo ottenere.

Mi occuperò dopo dell'immagine di anteprima, infatti ti chiederei ora come impostare la visualizzazione dei sei video. Ne ho messo la sorgente di tutti, ho fatto diverse prove, ma viene riprodotto solo quello che metto per primo nella lista.

Intendevo una situazione del tipo: https://html5box.com/blog/category/j...video-gallery/

Eventualmente cambio script, perché in effetti nella demo di quello che sto provando, il video è uno solo anche se nel codice di esempi ce n'erano due, forse per far vedere i diversi formati.

Riguardo alla questione che al caricamento delle pagine del sito vedevo le immagini testata sgranate, oggi è tutto normale.

Grazie per l'aiuto Ale, buona giornata

p.s. Ho provato a convertire il video che funziona male , anche on line, ma è lo stesso. Nel pc invece avevo scaricato Freemake Video Converter. Poresti suggerirmene uno tu? Il file è grande, può dipendere da questo?
31-07-2018, 08.07.04

Ho risolto con la conversione del primo video,ora si vede bene anche se ha una immagine di anteprima del programma free, poi ne metterò una adeguata.
31-07-2018, 10.55.02
alemoppo

Citazione:

Originalmente inviato da newquantum

Intendevo una situazione del tipo: https://html5box.com/blog/category/j...video-gallery/

Questa gallery è molto carina e facile da utilizzare.

Il problema è che apparirà una scritta "HTML5 Gallery Free Version" che è possibile eliminare solo acquistando la galleria, non so se può andarti bene (in realtà si può eliminare facilmente ma non mi sembra rispettoso per gli sviluppatori).

Comunque si utilizza così: si carica (dopo aver estratto i file da qui) la cartella "html5gallery" e si includono i file necessari nell'head tua pagina con:

Codice HTML:

<script type="text/javascript" src="html5gallery/jquery.js"></script> <script type="text/javascript" src="html5gallery/html5gallery.js"></script>

Quindi si inserisce la gallery in questo modo:

Codice HTML:

<div style="display:none;" class="html5gallery" data-skin="horizontal" data-width="480" data-height="272"> //primo video <a href="video1.mp4"><img src="anteprima1.jpg" alt="descrizione video 1"></a> //secondo video <a href="video2.mp4"><img src="anteprima2.jpg" alt="descrizione video 2"></a> //etc etc... </div>

Ciao!
31-07-2018, 15.57.27

Ok, ho provato la videogallery, devo sistemare le anteprima, però quando apro la pagina VIDEO la finestra di visualizzazione resta sulla sinistra e a destra lo spazio resta vuoto. Non mi dispiacevano le sei anteprima a destra meglio visualizzabili, ma mi posso accontentare. Magari starebbe bene al centro? Puoi dirmi come correggere in tal caso lo style? Per ora non lo so se la terrò, ma vorrei provare a completarla. Dal cellulare è un po' complicato e troppo minuscolo il tutto, magari fatte queste prove potrei valutare il tentare di rendere il sito adeguato ad html5 e responsive.

Grazie mille per l'aiuto.