Last active
July 13, 2020 11:49
-
-
Save codingjoe/ba7642d3008f814a172740dfff5fff18 to your computer and use it in GitHub Desktop.
HTML background Video
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/bin/env sh | |
| set -exo pipefail | |
| # Usage: ./compress-video.sh input-video.mp4 [output-filename-no-ext] [bitrate] | |
| echo "Encode AV1..." | |
| ffmpeg -hide_banner -i "$1" -pass 1 -c:v libaom-av1 -cpu-used 4 -strict experimental -tile-columns 3 -b:v "${3:-"1.3M"}" -threads 8 -auto-alt-ref 1 -lag-in-frames 25 -g 128 -pix_fmt yuv420p -an -sn -y -f webm /dev/null && \ | |
| ffmpeg -hide_banner -i "$1" -pass 2 -c:v libaom-av1 -cpu-used 4 -strict experimental -tile-columns 3 -b:v "${3:-"1.3M"}" -threads 8 -auto-alt-ref 1 -lag-in-frames 25 -g 128 -pix_fmt yuv420p -an -sn -y -f webm "${2:-voiio-login-bg}.av1.webm" | |
| echo "Encode HVEC..." | |
| ffmpeg -hide_banner -i "$1" -c:v libx265 -b:v "${3:-"1.3M"}" -threads 8 -x265-params pass=1 -an -y -f mp4 /dev/null && \ | |
| ffmpeg -hide_banner -i "$1" -c:v libx265 -b:v "${3:-"1.3M"}" -threads 8 -x265-params pass=2 -an -y -f mp4 -tag:v hvc1 "${2:-voiio-login-bg}.hvec.mp4" | |
| echo "Encode VP9..." | |
| ffmpeg -hide_banner -i "$1" -pass 1 -c:v libvpx-vp9 -b:v "${3:-"1.3M"}" -threads 8 -g 128 -pix_fmt yuv420p -an -sn -y -f mp4 /dev/null && \ | |
| ffmpeg -hide_banner -i "$1" -pass 2 -c:v libvpx-vp9 -b:v "${3:-"1.3M"}" -threads 8 -g 128 -pix_fmt yuv420p -an -sn -y -f mp4 "${2:-voiio-login-bg}.vp9.mp4" | |
| echo "Encode H.264..." | |
| ffmpeg -hide_banner -i "$1" -pass 1 -c:v libx264 -b:v "${3:-"1.3M"}" -threads 8 -g 128 -pix_fmt yuv420p -an -sn -y -f mp4 /dev/null && \ | |
| ffmpeg -hide_banner -i "$1" -pass 2 -c:v libx264 -b:v "${3:-"1.3M"}" -threads 8 -g 128 -pix_fmt yuv420p -an -sn -y -f mp4 "${2:-voiio-login-bg}.h264.mp4" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <style> | |
| #backgroundVideo { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| z-index: -1; | |
| object-fit: cover; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <video id="backgroundVideo" muted loop preload="none" poster="path/to/static/background.jpg"> | |
| <!-- WebM AV1 for Chrome, Firefox and Edge --> | |
| <source src="{% static 'voiio/video/voiio-login-bg.av1.webm' %}" type='video/webm; codecs="av01.0.00M.08"'> | |
| <!-- WebM AV1 for Safary --> | |
| <source src="{% static 'voiio/video/voiio-login-bg.hvec.mp4' %}" type='video/mp4; codecs="hev1.1.6.L93.B0"'> | |
| <!-- WebM AV1 for Edge --> | |
| <source src="{% static 'voiio/video/voiio-login-bg.vp9.mp4' %}" type='video/mp4; codecs="vp09.00.50.08"'> | |
| <!-- WebM AV1 for IE --> | |
| <source src="{% static 'voiio/video/voiio-login-bg.h264.mp4' %}" type='video/mp4'> | |
| </video> | |
| <!-- // CONTENT // --> | |
| <script> | |
| window.mobilecheck = function () { | |
| var check = false; | |
| (function (a) { | |
| if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; | |
| })(navigator.userAgent || navigator.vendor || window.opera) | |
| return check | |
| }; | |
| // The will only load/play on Desktop, on mobile a static background image is used. | |
| (function () { | |
| if (!mobilecheck()) { | |
| var video = document.getElementById('backgroundVideo') | |
| video.load() | |
| video.play() | |
| } | |
| })() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment