Merge pull request #414 from MTES-MCT/fix/firefox_video_format

Fix/firefox video format

.gitattributes

@@ -0,0 +1,3 @@
+*.mp4 filter=lfs diff=lfs merge=lfs -text
+*.webm filter=lfs diff=lfs merge=lfs -text
+*.ogv filter=lfs diff=lfs merge=lfs -text

web/landing/ResourcePage/VideoCard.js

@@ -5,7 +5,15 @@ import { resourceCardsClasses } from "./styles/ResourceCardsStyle";
 import { useMatomo } from "@datapunt/matomo-tracker-react";
 import { PLAY_VIDEO } from "common/utils/matomoTags";
 
-export function VideoCard({ video, description, poster, matomoTag, ...props }) {
+export function VideoCard({
+  video_mp4,
+  video_webm,
+  video_ogv,
+  description,
+  poster,
+  matomoTag,
+  ...props
+}) {
   const classes = resourceCardsClasses();
   const { trackEvent } = useMatomo();
 
@@ -26,10 +34,12 @@ export function VideoCard({ video, description, poster, matomoTag, ...props }) {
         preload="metadata"
         onPlay={clickEvent}
       >
-        <source src={video} type="video/mp4" />
+        <source src={video_mp4} type="video/mp4" />
+        <source src={video_webm} type="video/webm" />
+        <source src={video_ogv} type="video/ogv" />
         <p>
           Votre navigateur ne prend pas en charge les vidéos HTML5. Voici{" "}
-          <a href={video}>un lien pour télécharger la vidéo</a>
+          <a href={video_mp4}>un lien pour télécharger la vidéo</a>
         </p>
       </video>
     </Card>

web/landing/sections/IntroSection.js

@@ -10,9 +10,13 @@ import { makeStyles } from "@mui/styles";
 import { useIsWidthDown } from "common/utils/useWidth";
 import { VideoCard } from "../ResourcePage/VideoCard";
 
-import MobilicVideo from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.mp4";
+import MobilicVideo_mp4 from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.mp4";
+import MobilicVideo_webm from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.webm";
+import MobilicVideo_ogv from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic.ogv";
 import MobilicPoster from "common/assets/videos/accueil/accueil-qu-est-ce-que-mobilic-preview.jpg";
-import ReglementationVideo from "common/assets/videos/accueil/accueil-reglementaire.mp4";
+import ReglementationVideo_mp4 from "common/assets/videos/accueil/accueil-reglementaire.mp4";
+import ReglementationVideo_webm from "common/assets/videos/accueil/accueil-reglementaire.webm";
+import ReglementationVideo_ogv from "common/assets/videos/accueil/accueil-reglementaire.ogv";
 import ReglementationPoster from "common/assets/videos/accueil/accueil-reglementaire-preview.jpg";
 
 const useStyles = makeStyles(theme => ({
@@ -182,14 +186,18 @@ export function IntroSection() {
           <Grid item xs={12} sm={6}>
             <VideoCard
               description="Mobilic, qu'est-ce que c'est ?"
-              video={MobilicVideo}
+              video_mp4={MobilicVideo_mp4}
+              video_webm={MobilicVideo_webm}
+              video_ogv={MobilicVideo_ogv}
               poster={MobilicPoster}
             />
           </Grid>
           <Grid item xs={12} sm={6}>
             <VideoCard
               description="Mobilic est-il conforme à la réglementation ?"
-              video={ReglementationVideo}
+              video_mp4={ReglementationVideo_mp4}
+              video_webm={ReglementationVideo_webm}
+              video_ogv={ReglementationVideo_ogv}
               poster={ReglementationPoster}
             />
           </Grid>