Supporto » Fixing WordPress » Native video html5 unusable buttons

  • Risolto danjde

    (@danjde)


    Hi Friends!
    A few days ago we noticed a problem with the video buttons (play, pause, full screen, etc), here the video where you can see the behavior.

    Could it be due to a change that we introduced to css?

    This is the html code:

    [video poster="https://www.staccoexperience.com/wp-content/uploads/2019/03/copertina-video-02-e1552462718327.jpg" width="1200" height="676" mp4="https://www.staccoexperience.com/wp-content/uploads/2019/03/2a-versBN_20fps1200.mp4"][/video]

    Many many thanks!

    • Questo topic è stato modificato 5 anni fa da danjde.

    La pagina su cui ho bisogno di aiuto: [devi essere connesso per vedere il link]

Stai visualizzando 12 risposte - dal 1 al 12 (di 12 totali)
  • Moderatore Gloria Liuni

    (@glorialchemica)

    Hi @danjde ,
    have you tried using the Gutenberg block for videos?

    It looks like you’re using a plugin to embed the video.
    The best thing is to ask for help in the plugin developer support forum. This should be it. https://wordpress.org/support/plugin/media-element-html5-video-and-audio-player/

    Let us know.

    P.S.
    Se parli italiano, lo puoi usare qui. È il forum di supporto in Italiano 🙂

    • Questa risposta è stata modificata 5 anni fa da Gloria Liuni.
    Chi ha creato la discussione danjde

    (@danjde)

    Hoops! Scusate ho postato in lingua inglese in un forum italiano!
    Tornando al problema, vi assicuro che sto usando il metodo nativo per includere il video e non ho installato alcun plugin per video.

    Avevo installato un plugin, provato e poi rimosso.
    Potrebbe dipendere da ciò? Da qualche residuo del plugin precedente? Ed eventualmente come verificare?

    Grazie ancora!

    Davide

    Moderatore Gloria Liuni

    (@glorialchemica)

    Ciao @danjde,
    ispezionando il codice si vedono dei div creati con una tipologia di classe che di solito aggiungono i plugin.

    Facendo una ricerca su internet con quel prefisso avevo trovato fra i risultati il plugin che ti ho citato in precedenza.

    Può darsi che attivando e disattivando il plugin non si sia cancellato il bene il codice. Prova a fare un test in una pagina nuova di WP.

    Che versione di WP stai usando? Vedi questo quando carichi il video?

    Chi ha creato la discussione danjde

    (@danjde)

    Salve Gloria e grazie ancora del prezioso aiuto!
    In effetti cercando nella cartella specifica di questo virtualhost:

    grep -R 'mejs-container' .

    ottengo parecchi elementi anche in path inaspettati:

    ./wp-content/themes/twentyseventeen/assets/css/editor-style.css:.mejs-container
    ./wp-content/themes/twentyseventeen/assets/css/editor-style.css:.wp-playlist-dark .mejs-container .mejs-controls
    ./wp-content/themes/twentyseventeen/style.css:.mejs-container
    ./wp-content/themes/twentyseventeen/style.css:.site-content .wp-playlist-dark .mejs-container .mejs-controls
    ./wp-includes/css/media-views.css:.mejs-container video
    ./wp-includes/css/media-views.css:.mejs-container:focus
    ./wp-includes/css/media-views.min.css: */.ui-draggable-handle....
    ./wp-includes/css/media-views-rtl.css:.mejs-container:focus
    ./wp-includes/css/media-views-rtl.css:.mejs-container video
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css:.mejs-offscreen
    ./wp-includes/js/mediaelement/wp-mediaelement.js:				.not( '.mejs-container
    ./wp-includes/js/mediaelement/wp-mediaelement.css:.wp-playlist .mejs-container 
    ./wp-includes/js/mediaelement/wp-mediaelement.css:.mejs-container .mejs-controls
    ./wp-includes/js/mediaelement/wp-mediaelement.css:.mejs-container
    ./wp-includes/js/mediaelement/wp-mediaelement.css:.mejs-container
    ./wp-includes/js/mediaelement/wp-mediaelement.css:.mejs-container
    ./wp-includes/js/mediaelement/wp-playlist.js:		$( '.wp-playlist:not(:has(.mejs-container))
    ./wp-includes/js/mediaelement/wp-playlist.min.js:!function(a,b,c){"use strict";function d(){a(".wp-playlist:not(:has(.mejs-container......
    ./wp-includes/js/mediaelement/wp-mediaelement.min.css:.mejs-container{clear:both;max-width:100%}.mejs-container....
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container.mejs-hide-cues video::-webkit-media-text-track-container 
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container-keyboard-inactive a,
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container-keyboard-inactive a:focus,
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container-keyboard-inactive button,
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container-keyboard-inactive button:focus,
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container-keyboard-inactive [role=slider],
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container-keyboard-inactive [role=slider]:focus
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container {
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container * {
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container video::-webkit-media-controls,
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container video::-webkit-media-controls-panel,
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container video::-webkit-media-controls-panel-container,
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container video::-webkit-media-controls-start-playback-button {
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-fill-container .mejs-container {
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container:focus {
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container-fullscreen {
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container-fullscreen .mejs-mediaelement,
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css:.mejs-container-fullscreen video
    ./wp-admin/css/media-rtl.css:.mejs-container {
    ./wp-includes/js/mediaelement/wp-mediaelement.min.js:!function(a,b){function
    ./wp-admin/css/media.css:.mejs-container {
    ./wp-admin/css/media.min.css:.media-item .describe{border-collapse:collapse....
    ./wp-admin/css/media-rtl.min.css:.media-item .describe{border-collapse:collapse....

    Se cerco invece non i contenuti ma i files:

    find ./ -iname *mediaelement*
    ./wp-includes/js/mediaelement
    ./wp-includes/js/mediaelement/wp-mediaelement.min.js
    ./wp-includes/js/mediaelement/mediaelementplayer.css
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.css
    ./wp-includes/js/mediaelement/mediaelement-migrate.min.js
    ./wp-includes/js/mediaelement/mediaelement-migrate.js
    ./wp-includes/js/mediaelement/mediaelementplayer.min.css
    ./wp-includes/js/mediaelement/mediaelement.js
    ./wp-includes/js/mediaelement/mediaelement-and-player.js
    ./wp-includes/js/mediaelement/mediaelement.min.js
    ./wp-includes/js/mediaelement/wp-mediaelement.min.css
    ./wp-includes/js/mediaelement/wp-mediaelement.css
    ./wp-includes/js/mediaelement/mediaelement-and-player.min.js
    ./wp-includes/js/mediaelement/wp-mediaelement.js
    ./wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css

    ed il plugin non risulta installato e nemmeno presente nella directory “Plugins” di WP…

    Non so che dire (a parte i complimenti allo sviluppatore..).
    Quale potrebbe essere ora la via più corretta di procedere?
    Ho visto nella sezione “Support” del plugin che la maggior parte dei thread no hanno risposta, ma credo sia d’obbligo per prima cosa segnalare la problematica e poi decidere cosa fare con la mia installazione WP.

    Suggerimenti? 🙂

    Grazie ancora della gentilissima disponibilità

    Davide

    Chi ha creato la discussione danjde

    (@danjde)

    @glorialchemica: Che versione di WP stai usando? Vedi questo quando carichi il video?

    La 5.1.1, e non uso Gutenberg ma quello tradizionale:

    • Questa risposta è stata modificata 5 anni fa da danjde.
    Moderatore Gloria Liuni

    (@glorialchemica)

    Ciao @danjde,
    personalmente non so dirti se i file che hai trovato siano stati aggiunti dal plugin, le mie competenze non sono così avanzate. Mi sembra strano che vada a mettere file dentro le cartelle wp-admin e wp-includes.

    Giuro che Gutenberg non morde, per cui se stai partendo da zero con un progetto ti consiglio di sperimentarlo, avrai meno problemi nell’embedded di contenuti multimediali.

    Non ho capito come stai caricando il file video usando l’editor Classico.

    Chi ha creato la discussione danjde

    (@danjde)

    @glorialchemica: Giuro che Gutenberg non morde, per cui se stai partendo da zero con un progetto ti consiglio di sperimentarlo, avrai meno problemi nell’embedded di contenuti multimediali.

    Non ho capito come stai caricando il file video usando l’editor Classico.

    Non si tratta di un progetto nuovo e con altri collaboratori, per cui continuo ad usare l’editor classico e in ogni caso non vedo come passare a Gutenberg potrebbe risolvere il problema :-\

    Per inserire il video utilizzo semplicemente il pulsante “Aggiungi Media” che crea questo codice:

    [video poster="https://www.staccoexperience.com/wp-content/uploads/2019/03/copertina-video-02-e1552462718327.jpg" width="1200" height="676" mp4="https://www.staccoexperience.com/wp-content/uploads/2019/03/2a-versBN_20fps1200.mp4"][/video]

    Grazie ancora

    Davide

    Moderatore Gloria Liuni

    (@glorialchemica)

    Ciao @danjde,
    grazie mi hai permesso di imparare cose nuove. Le classi CSS che ho trovato sono native di WP.
    Quindi il plugin che hai provato non ha lasciato residui dietro di se’.

    Ho provato a inserire il video come hai fatto tu su un sito di prova, non mi dà quegli errori di visualizzazione.Vedi i comandi del video perfettamente.
    A questo punto il mio consiglio è di fare una prova con un tema base di WP (uno dei vari twenty-*).
    Potrebbe essere il tema che va in conflitto con il video. Se così fosse, ti consiglio di contattare lo sviluppatore del tema che stai usando.

    Prova anche a disattivare tutti i plugin che stai utilizzando e riattivarli uno per volta.

    Facci sapere

    • Questa risposta è stata modificata 5 anni fa da Gloria Liuni.
    Chi ha creato la discussione danjde

    (@danjde)

    Ah, dunque non si tratterebbe di elementi estranei, e le directory “wp-includes/js/mediaelement/” sono native.
    Beh, spero che non la prenda male lo sviluppatore di MediaElements.js

    Faccio le verifiche che suggerisci e poi aggiorno.

    Grazie ancora

    Davide

    Chi ha creato la discussione danjde

    (@danjde)

    Ho risolto,
    il problema dipenda da una modifica da me apportata nel file “shortcodes.css” del template commerciale (abbandonato) EightDegree.
    In pratica agendo sulla parte relativa gli shortcode dei pulsanti questo interferiva anche a livello di sistema perchè coincideva l’identificativo CSS.
    La modifica:

    Da:

    
    /*-----------------------------------------------------------------------------------*/
    /*      button Styles
    /*-----------------------------------------------------------------------------------*/
    .button, button, input[type="submit"]{
      display: inline-block;
      font-size: 16px;
      font-weight: normal;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 2px solid;
      padding: 7px 40px 6px 40px;
      max-width: 100%;
      border-radius: 2px;
    }

    a:

    /*-----------------------------------------------------------------------------------*/
    /*      button Styles
    /*-----------------------------------------------------------------------------------*/
    .button, button, input[type="submit"]{
      display: inline-block;
      font-size: 16px;
      font-weight: normal;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: 2px solid;
      padding: 12px 40px 12px 40px !important;
      max-width: 100%;
      border-radius: 2px;
    }

    Grazie comunque della gentilissima disponibilità

    Davide

    Moderatore Gloria Liuni

    (@glorialchemica)

    Ciao @danjde,
    grazie per aver condiviso la tua soluzione. Puoi indicare come risolto questo topic.

    In generale il consiglio è di evitare di usare temi che non vengono più aggiornati, questo perché a un certo punto non saranno più compatibili con le release di WP, e nel caso ci fossero vulnerabilità, nessuno le corregge.

    Chi ha creato la discussione danjde

    (@danjde)

    @glorialchemica: il consiglio è di evitare di usare temi che non vengono più aggiornati,

    ..eh, ho capito, ma i temi prima o dopo vengono tutti abbandonati e allora che fare, continuare a cambiare tema?!?

    Grazie ancora

    Davide

Stai visualizzando 12 risposte - dal 1 al 12 (di 12 totali)
  • Il topic ‘Native video html5 unusable buttons’ è chiuso a nuove risposte.