Autoplay qui marche pas à tous les coups , besoin d'aide

Ce sujet est résolu
Default
,

Bonjour à tous,

Je suis nouveau sur le forum et ravi !! ????

J'ai un soucis avec une vidéo qui devrait se lancer automatiquement dans ma page d'accueil mais selon les navigateurs et les moments, elle peut ne pas se charger.

Je souhaite avoir un avis sur mon code html et les modifications à effectuer pour avoir à coups sur ma vidéo qui se lance. Aussi je voudrais qu'une image s'affiche à la place quand la vidéo ne peut être jouer en autoplay.

J'espère avoir été clair sur ma demande.

Mon site est : www.strasbourg-taxi.fr en Worpress

Merci d'avance pour votre aide

Voici mon code pour la partie vidéo (enfin j'espère)

<?php

/**Template Name: Home page

 * The template for displaying all pages.
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package cshero
 */
global $post, $breadcrumb;
get_header(); ?>
<link rel="stylesheet" type="text/css" href="../assets/css/remodal-default-theme.css">
<link rel="stylesheet" type="text/css" href="../assets/css/remodal.css">
<?php $layout = cshero_generetor_layout();?>
<div class="remodal-bg">
    <div id="primary" class="content-area<?php if($breadcrumb == '0'){ echo ' no_breadcrumb_page'; }; ?><?php echo esc_attr($layout->class); ?>">
    <style type="text/css">
      .homepage-hero-module {
          border-right: none;
          border-left: none;
          position: relative;
      }
      .no-video .video-container video,
      .touch .video-container video {
          display: none;
      }
      .no-video .video-container .poster,
      .touch .video-container .poster {
          display: block !important;
      }
      .video-container {
          position: relative;
          bottom: 0%;
          left: 0%;
          height: 100%;
          width: 100%;
          overflow: hidden;
          background: #000;
      }
      .video-container .poster img {
          width: 100%;
          bottom: 0;
          position: absolute;
      }
      .video-container .filter {
          z-index: 100;
          position: absolute;
          background: rgba(0, 0, 0, 0.4);
          width: 100%;
      }
      .video-container video {
          position: absolute;
          z-index: 0;
          bottom: 0;
      }
      .video-container video.fillWidth {
          width: 100%;
      }
    </style>
    <div class="homepage-hero-module" style="max-height: 808px; min-height: 600px;">
      <div class="video-container">
          <!-- <div class="filter"></div> -->
          <video autoplay loop class="fillWidth">
              <source src="../assets/video/strasbourg-taxi-presentation.mp4" type="video/mp4" />
              <source src="../assets/video/strasbourg-taxi-presentation.webm" type="video/webm" />
          </video>
          <div class="poster hidden">
              <img src="../assets/video/strasbourg-taxi-presentation.png" alt="">
          </div>

2 Réponse

17162
,

Bonjour.
En ce qui concerne l'image, il te suffit d'utiliser l'attribut poster, qui permet d'afficher une image en attendant que la vidéo soit lancée.

mais selon les navigateurs et les moments, elle peut ne pas se charger.

Pour information :

Pour certains navigateurs (ex. Chrome 70), l'attribut autoplay ne fonctionne pas si aucun attribut mute n'est présent.

Default
,

J'ai rajouté un controls pour activer la vidéo en attendant,

merci pour ta réponse Lartak