SlideShare a Scribd company logo
1 of 33
La compression vidéo
             Une approche simplifiée des problématiques de la compression vidéo
                                        pour le web




Samir AMZANI
Senior Web Developer
samir@wmaker.net
Qu’allons nous voir ?
•   Pourquoi compresser une vidéo ?
•   Les principes de la compression vidéo
•   Les standards
•   Les codecs
•   Les conteneurs
•   Les encodeurs
•   Paramètres d’encodage
Video ?
•   Origine «je vois» [latin]

•   Succession d’images

•   25 fps, 30fps...

•   illusion de mouvement

•   En général :

    •   Enregistrement d’images animées (son?)

    •   Restitution sur un support électronique
Pourquoi compresser ?

• CPU   bande passante




        C’est trop cher!!!
Pourquoi compresser ?
• les CPU augmentent plus vite que la bande
  passante

                     Texte       Lois de moore




                                    Qualité
Pourquoi compresser ?

• La bande passante est chère
 •   1H de vidéo non compressée : 263Go

     •   1024x768=786 432 pixels

     •   Un pixel (sur un écran true color 32Bits) -> 4 Octet


     •   Une image -> 786 432 x 4 =   3Mo
     •   1sec de vidéo -> 25 images ->   75Mo/sec
Pourquoi compresser ?

• L’espace et le débit c’est cher :
  •   L’offre la moins cher chez OVH (bande passante)

      •   chez OVH    200Mbps
      •   3 lecture simultané d’une vidéo avec [biterate 75Mo/s] -> Explose la bande passante

      •   On a donc intérêt à compresser les vidéos
Principes de la compression
Principes de la compression
Principes de la compression


• Sans Perte (Lossless)
    •   Elimine la redondance des données

    •   Compactage (Winzip...)

    •   Gain 10 à 30%

    •   Utilisé par le déruchage (audiovisuel)
Principes de la compression


• Avec Perte
 •   On perd la qualité

 •   On peut économiser jusqu'à 90%

 •   L’astuce => on triche avec l’oeil et l’oreille
Compression avec perte
« Ne jamais transmettre une donnée déja transmise »




 • redondance spaciale
 • redondance temporelle
Compression avec perte



• Redondance spatial
   • Compression des images
   • On utilise le JPEG
   • Il doit pas être trop élevé
Compression avec perte

• Redondance temporelle
 • On encode que les différences
 • On perd des détails
 • Produit trois types d’images compressés
     • I-frame           GOP : Group of Pictrure

     • P-frame           12 à 15 images (MPEG1)

     • B-frame
Compression avec perte
    Redondance temporelle
Compression avec perte
             Redondance temporelle


                  I - Frame
- Image intracodé : Codé en JPEG
- Il ne dépend pas d’une autre image
- «Image clé» -> KeyFrame
Compression avec perte
             Redondance temporelle


                    P - Frame
- Image prédictive
- Contient que les pixels modifiés
- On encode que les différences
- 1/3 taille par rapport a I-Frame
Compression avec perte
             Redondance temporelle


                     B - Frame
- Image Bi-directionnelles
- C’est une image prédite à partir de I et P
                 I(i) + P(i++) = B
- 1/6 taille I-Frame
Les standards de compression




 MPEG :                   ITU :
Définit les             Développe
standards              les codecs
Quelques standards de compression


•   JPEG et MP-JPEG
    •   Que des images pleins
    •   Extraire les images des vidéos
•   MPEG-1
    •   Pour faire mieux que le VHS (VCD) : 1.15M/s
•   MPEG-2
    •   Premier standard pour la diffusion
    •   DVD, TV, TVHD, TNT (sauf en france), Satellite...
    •   3 à 50 M/s, et en HD jusqu’a 300M/s
•   MPEG-3
    •   MP3
•   MPEG-4
    •   C’est beaucoup mieux
    •   MPEG-4 ASP Génération (Divx, H264, VP6
Les codecs

• CODEUR - DECODEUR
• Basé sur un standard
• Embarque l’intelligence de l’encodage
• Il y’on a trop...en plus ils dépendent des
  conteneurs
Les codecs
            Pour la diffusion web
Standards                                         Codecs

             Le grand père de tous les codecs
  H.261
                          1990



               Le père de tous les codecs       FLV    3GP
  H.263                 moderns
                       1993-1996



 H.263v2              MPEG4 - ASP               H264   Divx
 H263.v3          Meilleur compression
                         1998+                  VP6    VP7
Les conteneurs
                                        MetaData


                           keyframes:
                               time(0,23,35....)
                               filepoisitions (228, 23243, 435555...)




       Conteneur
    (.mp4, .mov, .flv...)
Les conteneurs
                        pour la diffusion web
                                                        H264
                      Diffusion : player flash (v6+)
FLV (Flash video)
                                                        H263

                                                      VP6 (ON2)



                                                        H264
                      Diffusion : player flash (v9+)
     MP4
                          Navigateurs HTML5
                             (chrome, safari)



                                                       Theora
                            Open source
     OGG
                         Navigateurs HTML5
                              (Firefox)
Les encodeurs
•   Solution matériel
    •   Certains cartes d'acquisition
    •   Serveur Hardware
•   Solution logicielle serveur
    •   FFmpeg (OpenSource)
    •   On2 Flix Engine (Payant)
•   Solution logicielle post-production
    •   Final Cut compressor (H264 meilleur!)
    •   Adobe Media encoder
    •   Handbrake (Win&Mac) (x264)
    •   Super (Windows)
Paramètres d’encodage
• Biterate :
  • Taille d’une seconde de vidéo
  • Améliore la qualité
  • Exemple : pour la HD web : 3000kbps /
     5000kbps
 • ! Biterate d’encodage < Biterate source
 •   Taille finale = Durée × bitrate
Paramètres d’encodage
• FrameRate
 • Combien de frame (images) par seconde
 • Le mieux c’est de laisser le même que la
    vidéo source
 • PAL, SECAM : 25fps
 • NTSC : 30fps
Paramètres d’encodage

• Résolutions
 • en pixel
 • HD :   1920 x 1080 (1080 p) ou 1280 x 720 (720p)


 • Il faut garder le format de la vidéo
   • 16:9 -> On garde 16:9, idem 4:3
Paramètres d’encodage
                A ne pas faire

Attention au format!


                16/9 => 3/4
Paramètres d’encodage
         Format




         16/9




         4/3
Paramètres d’encodage
                 Résumé

• Codec : H264
• Biterate : 3000kbps/5000kbps
• FrameRate (25 ou 30)
• Format : 16/9 (10% par rapport au 4/3)
• Résolution : HD (720p)
• Si vous avez le temps : encodez en 2 pass
Questions ?

More Related Content

Viewers also liked

IPTV, Internet Video and Adaptive Streaming Technologies
IPTV, Internet Video and Adaptive Streaming TechnologiesIPTV, Internet Video and Adaptive Streaming Technologies
IPTV, Internet Video and Adaptive Streaming Technologies
Cisco Canada
 
video compression techique
video compression techiquevideo compression techique
video compression techique
Ashish Kumar
 
Sistema De NumeracióN
Sistema De NumeracióNSistema De NumeracióN
Sistema De NumeracióN
Logos Academy
 
AnáLisis De 3ero TomáS No Quiere Zapatos
AnáLisis De 3ero   TomáS No Quiere ZapatosAnáLisis De 3ero   TomáS No Quiere Zapatos
AnáLisis De 3ero TomáS No Quiere Zapatos
Logos Academy
 
La argentina insolente
La argentina insolenteLa argentina insolente
La argentina insolente
aledifiori
 
Sustentabilidad de recursos hidricos
Sustentabilidad de recursos hidricosSustentabilidad de recursos hidricos
Sustentabilidad de recursos hidricos
Logos Academy
 
AnáLisis De 6to La Casa Chueca
AnáLisis De 6to La Casa ChuecaAnáLisis De 6to La Casa Chueca
AnáLisis De 6to La Casa Chueca
Logos Academy
 

Viewers also liked (20)

Video Compression Techniques
Video Compression TechniquesVideo Compression Techniques
Video Compression Techniques
 
MPEG video compression standard
MPEG video compression standardMPEG video compression standard
MPEG video compression standard
 
IPTV, Internet Video and Adaptive Streaming Technologies
IPTV, Internet Video and Adaptive Streaming TechnologiesIPTV, Internet Video and Adaptive Streaming Technologies
IPTV, Internet Video and Adaptive Streaming Technologies
 
video compression techique
video compression techiquevideo compression techique
video compression techique
 
Compression: Video Compression (MPEG and others)
Compression: Video Compression (MPEG and others)Compression: Video Compression (MPEG and others)
Compression: Video Compression (MPEG and others)
 
Espejo
EspejoEspejo
Espejo
 
Prueba
PruebaPrueba
Prueba
 
ESTRATEGIAS DE COMPRENSION LECTORA
ESTRATEGIAS DE COMPRENSION LECTORAESTRATEGIAS DE COMPRENSION LECTORA
ESTRATEGIAS DE COMPRENSION LECTORA
 
Sistema De NumeracióN
Sistema De NumeracióNSistema De NumeracióN
Sistema De NumeracióN
 
AnáLisis De 3ero TomáS No Quiere Zapatos
AnáLisis De 3ero   TomáS No Quiere ZapatosAnáLisis De 3ero   TomáS No Quiere Zapatos
AnáLisis De 3ero TomáS No Quiere Zapatos
 
Cv2015
Cv2015Cv2015
Cv2015
 
Influents 2016
Influents 2016Influents 2016
Influents 2016
 
Formacion humana ficha # 11
Formacion humana ficha #  11Formacion humana ficha #  11
Formacion humana ficha # 11
 
Vikram
VikramVikram
Vikram
 
La argentina insolente
La argentina insolenteLa argentina insolente
La argentina insolente
 
Vocabulario 5 sentidos
Vocabulario 5 sentidosVocabulario 5 sentidos
Vocabulario 5 sentidos
 
Sustentabilidad de recursos hidricos
Sustentabilidad de recursos hidricosSustentabilidad de recursos hidricos
Sustentabilidad de recursos hidricos
 
Indirect questions
Indirect questionsIndirect questions
Indirect questions
 
AnáLisis De 6to La Casa Chueca
AnáLisis De 6to La Casa ChuecaAnáLisis De 6to La Casa Chueca
AnáLisis De 6to La Casa Chueca
 
Practicas3 Secuencia While
Practicas3 Secuencia WhilePracticas3 Secuencia While
Practicas3 Secuencia While
 

Similar to Compression video pour la diffusion web

Presentation master
Presentation masterPresentation master
Presentation master
samir
 
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
Justindwah
 
Architecture
ArchitectureArchitecture
Architecture
zan
 

Similar to Compression video pour la diffusion web (20)

Presentation master
Presentation masterPresentation master
Presentation master
 
Post Production Audio VidéO Internet Mai 2008 Published
Post Production Audio VidéO Internet Mai 2008 PublishedPost Production Audio VidéO Internet Mai 2008 Published
Post Production Audio VidéO Internet Mai 2008 Published
 
Retour d'expérience : gérer des flux vidéos multiples de manière optimisée
Retour d'expérience :  gérer des flux vidéos multiples de manière optimiséeRetour d'expérience :  gérer des flux vidéos multiples de manière optimisée
Retour d'expérience : gérer des flux vidéos multiples de manière optimisée
 
Explication des termes de l'encodage vidéo
Explication des termes de l'encodage vidéoExplication des termes de l'encodage vidéo
Explication des termes de l'encodage vidéo
 
Xtreamer
XtreamerXtreamer
Xtreamer
 
Screencast, ce qu'il faut savoir avant d'enfoncer la touche "Record"
Screencast, ce qu'il faut savoir avant d'enfoncer la touche "Record"Screencast, ce qu'il faut savoir avant d'enfoncer la touche "Record"
Screencast, ce qu'il faut savoir avant d'enfoncer la touche "Record"
 
Adaptative streaming : enjeux, panorama, principes et difficultés
Adaptative streaming : enjeux, panorama, principes et difficultésAdaptative streaming : enjeux, panorama, principes et difficultés
Adaptative streaming : enjeux, panorama, principes et difficultés
 
TELESTREAM Vantage - VIDELIO Cap'Ciné
TELESTREAM Vantage - VIDELIO Cap'CinéTELESTREAM Vantage - VIDELIO Cap'Ciné
TELESTREAM Vantage - VIDELIO Cap'Ciné
 
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
Diffusion multi-écrans : quelles stratégies player et encodage mettre en oeuv...
 
Introduction à GStreamer
Introduction à GStreamerIntroduction à GStreamer
Introduction à GStreamer
 
Architecture
ArchitectureArchitecture
Architecture
 
Media center sous linux
Media center sous linuxMedia center sous linux
Media center sous linux
 
La diffusion vidéo avec le Cloud Azure
La diffusion vidéo avec le Cloud AzureLa diffusion vidéo avec le Cloud Azure
La diffusion vidéo avec le Cloud Azure
 
Telestream Vidchecker
Telestream VidcheckerTelestream Vidchecker
Telestream Vidchecker
 
Les formats audio
Les formats audioLes formats audio
Les formats audio
 
ÉCRITURE, PRODUCTION, MONTAGE ET ÉDUCATION AUX MÉDIAS
ÉCRITURE, PRODUCTION, MONTAGE ET ÉDUCATION AUX MÉDIASÉCRITURE, PRODUCTION, MONTAGE ET ÉDUCATION AUX MÉDIAS
ÉCRITURE, PRODUCTION, MONTAGE ET ÉDUCATION AUX MÉDIAS
 
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASHTutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
Tutoriel sur le streaming vidéo sur HTTP et sur MPEG-DASH
 
Présentation Ficam de la filière production 4K/UHD devant le HD Forum le 18 d...
Présentation Ficam de la filière production 4K/UHD devant le HD Forum le 18 d...Présentation Ficam de la filière production 4K/UHD devant le HD Forum le 18 d...
Présentation Ficam de la filière production 4K/UHD devant le HD Forum le 18 d...
 
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
Windows Azure Media Services: des API pour encoder, transmuxer, diffuser, ...
 
Présentation de Canal SPORT
Présentation de Canal SPORTPrésentation de Canal SPORT
Présentation de Canal SPORT
 

Compression video pour la diffusion web

  • 1.
  • 2. La compression vidéo Une approche simplifiée des problématiques de la compression vidéo pour le web Samir AMZANI Senior Web Developer samir@wmaker.net
  • 3. Qu’allons nous voir ? • Pourquoi compresser une vidéo ? • Les principes de la compression vidéo • Les standards • Les codecs • Les conteneurs • Les encodeurs • Paramètres d’encodage
  • 4. Video ? • Origine «je vois» [latin] • Succession d’images • 25 fps, 30fps... • illusion de mouvement • En général : • Enregistrement d’images animées (son?) • Restitution sur un support électronique
  • 5. Pourquoi compresser ? • CPU bande passante C’est trop cher!!!
  • 6. Pourquoi compresser ? • les CPU augmentent plus vite que la bande passante Texte Lois de moore Qualité
  • 7. Pourquoi compresser ? • La bande passante est chère • 1H de vidéo non compressée : 263Go • 1024x768=786 432 pixels • Un pixel (sur un écran true color 32Bits) -> 4 Octet • Une image -> 786 432 x 4 = 3Mo • 1sec de vidéo -> 25 images -> 75Mo/sec
  • 8. Pourquoi compresser ? • L’espace et le débit c’est cher : • L’offre la moins cher chez OVH (bande passante) • chez OVH 200Mbps • 3 lecture simultané d’une vidéo avec [biterate 75Mo/s] -> Explose la bande passante • On a donc intérêt à compresser les vidéos
  • 9. Principes de la compression
  • 10. Principes de la compression
  • 11. Principes de la compression • Sans Perte (Lossless) • Elimine la redondance des données • Compactage (Winzip...) • Gain 10 à 30% • Utilisé par le déruchage (audiovisuel)
  • 12. Principes de la compression • Avec Perte • On perd la qualité • On peut économiser jusqu'à 90% • L’astuce => on triche avec l’oeil et l’oreille
  • 13. Compression avec perte « Ne jamais transmettre une donnée déja transmise » • redondance spaciale • redondance temporelle
  • 14. Compression avec perte • Redondance spatial • Compression des images • On utilise le JPEG • Il doit pas être trop élevé
  • 15. Compression avec perte • Redondance temporelle • On encode que les différences • On perd des détails • Produit trois types d’images compressés • I-frame GOP : Group of Pictrure • P-frame 12 à 15 images (MPEG1) • B-frame
  • 16. Compression avec perte Redondance temporelle
  • 17. Compression avec perte Redondance temporelle I - Frame - Image intracodé : Codé en JPEG - Il ne dépend pas d’une autre image - «Image clé» -> KeyFrame
  • 18. Compression avec perte Redondance temporelle P - Frame - Image prédictive - Contient que les pixels modifiés - On encode que les différences - 1/3 taille par rapport a I-Frame
  • 19. Compression avec perte Redondance temporelle B - Frame - Image Bi-directionnelles - C’est une image prédite à partir de I et P I(i) + P(i++) = B - 1/6 taille I-Frame
  • 20. Les standards de compression MPEG : ITU : Définit les Développe standards les codecs
  • 21. Quelques standards de compression • JPEG et MP-JPEG • Que des images pleins • Extraire les images des vidéos • MPEG-1 • Pour faire mieux que le VHS (VCD) : 1.15M/s • MPEG-2 • Premier standard pour la diffusion • DVD, TV, TVHD, TNT (sauf en france), Satellite... • 3 à 50 M/s, et en HD jusqu’a 300M/s • MPEG-3 • MP3 • MPEG-4 • C’est beaucoup mieux • MPEG-4 ASP Génération (Divx, H264, VP6
  • 22. Les codecs • CODEUR - DECODEUR • Basé sur un standard • Embarque l’intelligence de l’encodage • Il y’on a trop...en plus ils dépendent des conteneurs
  • 23. Les codecs Pour la diffusion web Standards Codecs Le grand père de tous les codecs H.261 1990 Le père de tous les codecs FLV 3GP H.263 moderns 1993-1996 H.263v2 MPEG4 - ASP H264 Divx H263.v3 Meilleur compression 1998+ VP6 VP7
  • 24. Les conteneurs MetaData keyframes: time(0,23,35....) filepoisitions (228, 23243, 435555...) Conteneur (.mp4, .mov, .flv...)
  • 25. Les conteneurs pour la diffusion web H264 Diffusion : player flash (v6+) FLV (Flash video) H263 VP6 (ON2) H264 Diffusion : player flash (v9+) MP4 Navigateurs HTML5 (chrome, safari) Theora Open source OGG Navigateurs HTML5 (Firefox)
  • 26. Les encodeurs • Solution matériel • Certains cartes d'acquisition • Serveur Hardware • Solution logicielle serveur • FFmpeg (OpenSource) • On2 Flix Engine (Payant) • Solution logicielle post-production • Final Cut compressor (H264 meilleur!) • Adobe Media encoder • Handbrake (Win&Mac) (x264) • Super (Windows)
  • 27. Paramètres d’encodage • Biterate : • Taille d’une seconde de vidéo • Améliore la qualité • Exemple : pour la HD web : 3000kbps / 5000kbps • ! Biterate d’encodage < Biterate source • Taille finale = Durée × bitrate
  • 28. Paramètres d’encodage • FrameRate • Combien de frame (images) par seconde • Le mieux c’est de laisser le même que la vidéo source • PAL, SECAM : 25fps • NTSC : 30fps
  • 29. Paramètres d’encodage • Résolutions • en pixel • HD : 1920 x 1080 (1080 p) ou 1280 x 720 (720p) • Il faut garder le format de la vidéo • 16:9 -> On garde 16:9, idem 4:3
  • 30. Paramètres d’encodage A ne pas faire Attention au format! 16/9 => 3/4
  • 31. Paramètres d’encodage Format 16/9 4/3
  • 32. Paramètres d’encodage Résumé • Codec : H264 • Biterate : 3000kbps/5000kbps • FrameRate (25 ou 30) • Format : 16/9 (10% par rapport au 4/3) • Résolution : HD (720p) • Si vous avez le temps : encodez en 2 pass

Editor's Notes

  1. presente my self... campusPlex... Wmaker WebTV
  2. Dans ce cours..aborder...une aproche...
  3. L&amp;#x2019;objectif de cours...et de comprendre et &amp;#xE0; la fin comment on fait tous cela
  4. D&amp;#x2019;abord une vid&amp;#xE9;o c&amp;#x2019;est quoi... C&amp;#x2019;est une simple succession... (25/30 ... qui nous donne l&amp;#x2019;ilusion de mouvement
  5. 1. Les donn&amp;#xE9;es sont d&amp;#xE9;grad&amp;#xE9;s apr&amp;#xE8;s la compression. Mais on &amp;#xE9;conomisent... Ce mode de compression Utilise les faiblaisses...capacait&amp;#xE9;s sonores visuel
  6. On a vue qu&amp;#x2019;on .... &amp;#xE9;conomiser jusq&amp;#x2019;a 90%, on va voir pourquoi : Il y&amp;#x2019;a deux techniques On distingue ... qui peuvent &amp;#xEA;tre r&amp;#xE9;duites / compression et La philosophie
  7. compression au niveau des images &amp;#xE0; l&amp;#x2019;aide le l&amp;#x2019;algo JPEG Il doit pas elev&amp;#xE9; -&gt; sinon on perd on qualit&amp;#xE9; d&amp;#x2019;image
  8. Il y&amp;#x2019;a que le mouvement qui change -&gt; Background reste le m&amp;#xEA;me... On encode une image par rapport &amp;#xE0; une autre on se basant sur les diff&amp;#xE9;rences.
  9. Le MPEG est un groupe d&apos;industriels fond&amp;#xE9; en 1988 qui se r&amp;#xE9;unit r&amp;#xE9;guli&amp;#xE8;rement afin d&apos;&amp;#xE9;laborer des standards dans le domaine de la compression num&amp;#xE9;rique audio et vid&amp;#xE9;o afin d&apos;en faciliter la transmission par divers moyens. De leurs r&amp;#xE9;flexions sont n&amp;#xE9;s diff&amp;#xE9;rents formats, regroup&amp;#xE9;s sous les r&amp;#xE9;f&amp;#xE9;rences MPEG-1, MPEG-2, MPEG-4 et MPEG-7 et bient&amp;#xF4;t MPEG-21. Chacun r&amp;#xE9;pond &amp;#xE0; un besoin sp&amp;#xE9;cifique :
  10. MPEG3 : n&amp;#x2019;&amp;#xE9;t&amp;#xE9; pas impl&amp;#xE9;ment&amp;#xE9; pour la vid&amp;#xE9;o devant le suc&amp;#xE9;&amp;#xE9;s de MPEG-2
  11. FLV et 3GP &amp;#xE0; v&amp;#xE9;rifier