Comment permettre la lecture automatique des vidéos dans WordPress

Chrome ne permet plus, et ce depuis avril 2018, de lire les vidéos de manière automatique. Vous pouvez alors vous retrouver avec des vidéos fixes, notamment en page d’accueil: c’est ballot.
Source : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
Il faut savoir qu’en fait cette lecture automatique des vidéos reste possible mais que le code HTML de ces vidéos doit obligatoirement posséder l’attribut « muted » !

WordPress nous a ajouté depuis quelques versions un gentil shortcode vidéo bien pratique qui permet d’ajouter des vidéos facilement à son site, le problème est que celui-ci ne possède pas de propriété « muted ».

Par exemple :

La solution est donc de filtrer le code de votre rendu HTML afin d’ajouter aux vidéos le bon attribut. Comme nous ne voulons cela que sur les vidéos en autoplay muted= »1″ muted= »1″ muted= »1″ muted= »1″ muted= »1″ , nous allons ajouter le code suivant à notre fichier functions.php de notre thème :
function modificationHtml($buffer) {
$buffer = str_replace( ' autoplay ', ' autoplay muted="1" ', $buffer );
return $buffer;
}
function buffer_start() { ob_start("modificationHtml"); }
function buffer_end() { ob_end_flush(); }
add_action('wp_loaded', 'buffer_start');
add_action('shutdown', 'buffer_end');

18 thoughts on “Comment permettre la lecture automatique des vidéos dans WordPress”

  1. Bonjour
    Un grand merci pour cet article puisqu’il traite exactement de mon problème. Vidéo page d accueil, figée depuis avril sur google chrome.
    J ai ajouté les lignes sur mon functions.php mais cela n’a pas fonctionné. Une idée ? Les lignes peuvent etre ajoutées n importe où sur le fichier functions.php ? j utilise le thème enfant. C est dans le theme parent que je dois faire la modification ?

    1. Axel Chanfrault dit :

      Bonjour Michael,
      Normalement ça devrait marcher dans l’un ou l’autre des fichiers function mais il vaut toujours mieux utiliser le thème enfant.
      J’ai revu un peu le code, veuillez réessayer.

      1. Désolé pour la lenteur de ma réponse, j étais parti à l’étranger.
        Alors… Quand je mets le code dans le functions.php enfant, ça fait planter le site : mes articles sont remplacés par une page blanche.
        Quand je mets le code dans le functions.php du theme parent, le site fonctionne mais la vidéo sur google chrome reste figée. A noter : aucun souci sur internet explorer…
        Une idée ? (encore merci pour ton aide)

        1. Axel Chanfrault dit :

          Quelle est l’adresse du site ?

    1. Axel Chanfrault dit :

      C’est parce que l’autoplay n’est pas indiqué. Il faut ajouter autoplay= »on » dans le shortcode.
      Sinon tu peux placer la ligne 3 du code par :
      $buffer = str_replace( 'id="video-516-1_html5"', ' autoplay id="video-516-1_html5" ', $buffer );

  2. Michael MALACRINO dit :

    Je n ai pas bien compris la 2eme option.
    Il faut que j ajouter cela
    $buffer = str_replace( ‘id= »video-516-1_html5″‘, ‘ autoplay id= »video-516-1_html5″ ‘, $buffer );
    en ligne 3 du code de ton article c est ça ?
    ça donnerait :
    function modificationHtml($buffer) {
    $buffer = str_replace( ‘ autoplay ‘, ‘ autoplay muted= »1″ ‘, $buffer );
    return $buffer;
    }
    $buffer = str_replace( ‘id= »video-516-1_html5″‘, ‘ autoplay id= »video-516-1_html5″ ‘, $buffer );
    function buffer_start() { ob_start(« modificationHtml »); }
    function buffer_end() { ob_end_flush(); }
    add_action(‘wp_loaded’, ‘buffer_start’);
    add_action(‘shutdown’, ‘buffer_end’);

    c est ça ?

    1. Axel Chanfrault dit :

      Non, il ne faut pas ajouter la ligne mais remplacer celle qui commence par « $buffer »

  3. Michael MALACRINO dit :

    Non… 🙁 ça ne fonctionne pas. Rhooo j en suis désolé… C est peut etre la façon dont j ai modifié le functions.php dans le theme parent ? jte fais ici un copié collé

    ?php
    /**
    * Functions and definitions.
    *
    * @package WordPress
    * @subpackage Voyager
    * @since Voyager 1.0
    */

    /**
    * Framework.
    * PLEASE LEAVE THIS AREA UNTOUCHED, IN ORDER NOT TO BREAK CORE FUNCTIONALITY.
    * —————————————————————————–
    */
    if( !defined(‘THB_THEME_KEY’) ) define( ‘THB_THEME_KEY’, ‘voyager’ ); // Required, not displayed anywhere.

    /**
    * Framework.
    */
    require_once ‘framework/boot.php’;

    /**
    * General configuration.
    */
    thb_system_require_config( ‘config-general.php’ );

    /**
    * Theme functionalities.
    */
    thb_system_require_config( ‘config-functionalities.php’ );

    /**
    * Theme options.
    */
    thb_system_require_config( ‘config-options.php’ );

    /**
    * Theme customizations.
    */
    thb_system_require_config( ‘config-custom.php’ );

    /**
    * Theme plugins.
    */
    thb_system_require_config( ‘config-plugins.php’ );

    /**
    * Custom functions.
    */
    thb_require_custom_functions();

    /**
    * You can start adding your custom functions from here!
    function modificationHtml($buffer) {
    $buffer = str_replace( ‘id= »video-516-1_html5″‘, ‘ autoplay id= »video-516-1_html5″ ‘, $buffer );
    }
    function buffer_start() { ob_start(« modificationHtml »); }
    function buffer_end() { ob_end_flush(); }
    add_action(‘wp_loaded’, ‘buffer_start’);
    add_action(‘shutdown’, ‘buffer_end’);

    * —————————————————————————–
    */

    if( !isset($content_width) ) $content_width = 1400;

    1. Axel Chanfrault dit :

      Tu as une erreur PHP. Ajoute une astérisque et un slash */ à la fin de la ligne « You can start adding your custom functions from here! »

  4. Michael MALACRINO dit :

    oups ! ca a fait planter le site…
    Cette page ne fonctionne pas
    Impossible de traiter cette demande via un-tour-dans-le-sac.fr à l’heure actuelle.
    HTTP ERROR 500

    <?php
    /**
    * Functions and definitions.
    *
    * @package WordPress
    * @subpackage Voyager
    * @since Voyager 1.0
    */

    /**
    * Framework.
    * PLEASE LEAVE THIS AREA UNTOUCHED, IN ORDER NOT TO BREAK CORE FUNCTIONALITY.
    * —————————————————————————–
    */
    if( !defined('THB_THEME_KEY') ) define( 'THB_THEME_KEY', 'voyager' ); // Required, not displayed anywhere.

    /**
    * Framework.
    */
    require_once 'framework/boot.php';

    /**
    * General configuration.
    */
    thb_system_require_config( 'config-general.php' );

    /**
    * Theme functionalities.
    */
    thb_system_require_config( 'config-functionalities.php' );

    /**
    * Theme options.
    */
    thb_system_require_config( 'config-options.php' );

    /**
    * Theme customizations.
    */
    thb_system_require_config( 'config-custom.php' );

    /**
    * Theme plugins.
    */
    thb_system_require_config( 'config-plugins.php' );

    /**
    * Custom functions.
    */
    thb_require_custom_functions();

    /**
    * You can start adding your custom functions from here!*/
    function modificationHtml($buffer) {
    $buffer = str_replace( 'id="video-516-1_html5"', ' autoplay id="video-516-1_html5" ', $buffer );
    }
    function buffer_start() { ob_start("modificationHtml"); }
    function buffer_end() { ob_end_flush(); }
    add_action('wp_loaded', 'buffer_start');
    add_action('shutdown', 'buffer_end');

    * —————————————————————————–
    */

    if( !isset($content_width) ) $content_width = 1400;

    1. Axel Chanfrault dit :

      Ah oui il manque également un slash en avant-avant-dernière ligne, juste devant *——— (ça doit donc faire /*————)
      Tu peux checker ton code ici https://phpcodechecker.com/

  5. Michael MALACRINO dit :

    Rhoooo ! c est vraiement gentil de passer du temps comme ça pour m aider mais ça ne fonctionne pas.
    Tout mon site est devenu « blanc » : http://www.un-tour-dans-le-sac.fr
    J ai pourtant testé le code à l adresse indiquée et ça a donné « no issues » !

    🙁

    <?php
    /**
    * Functions and definitions.
    *
    * @package WordPress
    * @subpackage Voyager
    * @since Voyager 1.0
    */

    /**
    * Framework.
    * PLEASE LEAVE THIS AREA UNTOUCHED, IN ORDER NOT TO BREAK CORE FUNCTIONALITY.
    * —————————————————————————–
    */
    if( !defined('THB_THEME_KEY') ) define( 'THB_THEME_KEY', 'voyager' ); // Required, not displayed anywhere.

    /**
    * Framework.
    */
    require_once 'framework/boot.php';

    /**
    * General configuration.
    */
    thb_system_require_config( 'config-general.php' );

    /**
    * Theme functionalities.
    */
    thb_system_require_config( 'config-functionalities.php' );

    /**
    * Theme options.
    */
    thb_system_require_config( 'config-options.php' );

    /**
    * Theme customizations.
    */
    thb_system_require_config( 'config-custom.php' );

    /**
    * Theme plugins.
    */
    thb_system_require_config( 'config-plugins.php' );

    /**
    * Custom functions.
    */
    thb_require_custom_functions();

    /**
    * You can start adding your custom functions from here!*/
    function modificationHtml($buffer) {
    $buffer = str_replace( 'id="video-516-1_html5"', ' autoplay id="video-516-1_html5" ', $buffer );
    }
    function buffer_start() { ob_start("modificationHtml"); }
    function buffer_end() { ob_end_flush(); }
    add_action('wp_loaded', 'buffer_start');
    add_action('shutdown', 'buffer_end');

    /* —————————————————————————–
    */

    if( !isset($content_width) ) $content_width = 1400;

    1. Axel Chanfrault dit :

      Mhm ça peut être un problème de format de fichier. Quel éditeur de texte utilises-tu ?

      1. Michael MALACRINO dit :

        notepad

        1. Axel Chanfrault dit :

          Il faut vérifier que le fichier soit en ANSI via l’onglet « encodage ».

  6. Michael MALACRINO dit :

    Il ne l était pas. Il était en utf-8
    Quand je modifie en cliquant sur ansi, que j enregistre, que je quitte et que je reviens dessus, il est à nouveau en utf-8

  7. Michael MALACRINO dit :

    Bon c’est fichu ? merci tout de même d avoir essayé…

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Contactez-nous !

Indiquez le budget de votre projet *