Hero Video Performance - DrupalCamp Ruhr
0 likes19 views
The document provides tips and techniques for optimizing video performance on websites, including: 1. Using autoplay, loop, and muted attributes to autoplay videos silently by default. 2. Removing audio tracks from videos to reduce file sizes using FFmpeg or Handbrake. 3. Adding the faststart flag when encoding videos with FFmpeg to optimize buffering and playback. 4. Checking features like connection type, reduced motion preferences, and do not track settings to determine when autoplay is appropriate.
![CHROMEDATASAVER
<script>
var autoplay = true
if ("connection" in navigator && navigator.connection.saveData) {
autoplay = false
}
</script>
<?php
if (empty($_SERVER['HTTP_SAVE_DATA'])) {
// Load video
}
https://developer.chrome.com/multidevice/data-compression
https://developer.chrome.com/multidevice/data-compression](https://image.slidesharecdn.com/drupalcamp-ruhr-2023-hero-videos-230514084640-3ab4d8a2/85/Hero-Video-Performance-DrupalCamp-Ruhr-18-320.jpg)
![DONOTTRACK
Relevant for GDPR
<script>
var autoplay = true
if ("doNotTrack" in navigator && navigator.doNotTrack === "1") {
autoplay = false
}
</script>
<?php
if (empty($_SERVER['HTTP_DNT']) ||
$_SERVER['HTTP_DNT'] === 'unspecified') {
// Video von Drittanbieter (YouTube, Vimeo, ...)
}
https://www.praetor.im/notizen/please-do-not-track/
https://www.praetor.im/notizen/please-do-not-track/](https://image.slidesharecdn.com/drupalcamp-ruhr-2023-hero-videos-230514084640-3ab4d8a2/85/Hero-Video-Performance-DrupalCamp-Ruhr-19-320.jpg)
Hero Video Performance - DrupalCamp Ruhr
- 3. AUTOPLAYINGVIDEOS <video autoplay loop muted playsinline> <source src="video.mp4" type="video/mp4"> </video>
- 4. AUTOPLAYINGVIDEOS muted: Chrome, iOS, Android playsinline: iOS <video autoplay loop muted playsinline> <source src="video.mp4" type="video/mp4"> </video>
- 5. REMOVEAUDIOTRACK ffmpeg -i input.mp4 -an -c:v copy output.mp4
- 6. REMOVEAUDIOTRACK Also possible with ffmpeg -i input.mp4 -an -c:v copy output.mp4 HandBrake
- 7. MOOV-ATOM(MP4) ffmpeg -i input.mp4 -an -c:v copy -movflags +faststart output.mp4 https://www.adobe.com/devnet/video/articles/mp4_movie_atom.html https://www.adobe.com/devnet/video/articles/mp4_movie_atom.html
- 8. ALLTHECODECS! <video autoplay loop muted playsinline> <source src="av1.webm" type='video/webm;codecs="av01.0.05M.08"'> <source src="av1.mp4" type='video/mp4;codecs="av01.0.05M.08"'> <source src="h265.mp4" type='video/mp4;codecs="hvc1.1.L0.0"'> <source src="vp9.webm" type='video/webm;codecs="vp9"'> <source src="h264.mp4" type='video/mp4'> </video>
- 10. MOBILE(INTHEORY) <video autoplay loop muted playsinline> <source src="vid.mp4" media="(min-width: 1366px)" type="video/mp4"> <img src="screenshot.jpg" alt="Video screenshot"> </video>
- 11. MOBILE Problem: Video Media Query support was removed from Chrome + Firefox <video autoplay loop muted playsinline> <source src="vid.mp4" media="(min-width: 1366px)" type="video/mp4"> <img src="screenshot.jpg" alt="Video screenshot"> </video>
- 12. SVGPLACEHOLDER <style> #hero svg, #hero video, #hero img { height: auto; width: 100%; } </style> <div id="hero"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="9"/> </div>
- 13. SVGPLACEHOLDER <script> var hero = document.getElementById('hero') if (window.screen.width > 1365) { var video = document.createElement('video') video.src = 'video.mp4' video.setAttribute('muted', 'muted') video.setAttribute('loop', 'loop') hero.innerHTML = '' hero.appendChild(video) video.play() } else { hero.innerHTML = '<img src="screenshot.jpg" alt="screenshot">' }
- 14. SVGASPOSTERIMAGE <video id="hero" preload="none" loop muted playsinline poster="data:image/svg+xml,%3Csvg%20xmlns%3D%22..."> </video> <script> var video = document.getElementById('hero') if (window.screen.width > 1365) { video.setAttribute('src', 'large.mp4') video.play() } else { video.setAttribute('poster', 'screenshot.jpg') video.setAttribute('controls', 'controls') video.setAttribute('src', 'small.mp4') }
- 15. ISMOBILE? <script> ... navigator.userAgent.match(/Mobi/) window.screen.width > 1599 window.matchMedia('(min-width: 1366px)').matches ... </script>
- 16. ISVISIBLE? <video id="hero" preload="none" loop muted playsinline src="v.mp4"/> <script> if ("hidden" in document) { var hero = document.getElementById('hero') if (!document.hidden) hero.play() document.addEventListener('visibilitychange', function () { if (document.hidden) hero.pause() else hero.play() }, false) } </script>
- 17. REDUCEDMOTION <script> var autoplay = true if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { autoplay = false } </script> https://caniuse.com/prefers-reduced-motion https://caniuse.com/prefers-reduced-motion
- 18. CHROMEDATASAVER <script> var autoplay = true if ("connection" in navigator && navigator.connection.saveData) { autoplay = false } </script> <?php if (empty($_SERVER['HTTP_SAVE_DATA'])) { // Load video } https://developer.chrome.com/multidevice/data-compression https://developer.chrome.com/multidevice/data-compression
- 19. DONOTTRACK Relevant for GDPR <script> var autoplay = true if ("doNotTrack" in navigator && navigator.doNotTrack === "1") { autoplay = false } </script> <?php if (empty($_SERVER['HTTP_DNT']) || $_SERVER['HTTP_DNT'] === 'unspecified') { // Video von Drittanbieter (YouTube, Vimeo, ...) } https://www.praetor.im/notizen/please-do-not-track/ https://www.praetor.im/notizen/please-do-not-track/
- 20. MODERNJAVASCRIPT <script type="module"> let autoplay = true </script> <script nomodule> var autoplay = false </script>
- 21. NETWORKINFORMATIONAPI <script> var autoplay = false if ( "connection" in navigator && ( navigator.connection.type === 'ethernet' || navigator.connection.type === 'wifi' || navigator.connection.type === '4g' ) ) { autoplay = true } </script>
- 23. AUTOPLAYACTIVE? <script> window.setTimeout(function () { var hero = document.getElementById('hero') if (hero.paused) { hero.setAttribute('controls', 'controls') hero.setAttribute('poster', 'screenshot.jpg') } }, 2000) </script> https://www.w3.org/2010/05/video/mediaevents.html https://www.w3.org/2010/05/video/mediaevents.html
- 24. VIDEOASANIMAGE <picture> <source srcset="video.mp4" type="video/mp4"> <source srcset="video.webp" type="image/webp"> <img src="video.gif" alt="Video"> </picture> https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/ https://calendar.perfplanet.com/2017/animated-gif-without-the-gif/