705 views
# Codectestseite für Browser Diese Seite habe ich erstellt, um eine **Testseite für verschiedene Browser** zu haben. Wenn das Video in deinen verschiedenen Browsern angezeigt wird, kannst du ein derartiges Format auch für deine Lernenden nutzen. Insbesondere das H264/AAC Format im mp4 Container sollte überall funktionieren. Die Idee zur Testseite kam mir beim Schreiben von zwei Artikeln aus meinem Blog. Vielleicht auch lesenswert für dich: - https://www.ulrichivens.de/index.php/2020/10/05/videos-aus-owncloud-und-nextcloud-in-h5p-nutzen/ - https://www.ulrichivens.de/index.php/2020/10/03/videos-aus-nextcloud-oder-owncloud-in-bigbluebutton-streamen/ Schaue dir zu den Kompatibilitäten gerne auch die gut recherchierte Tabelle unter https://gist.github.com/Vestride/278e13915894821e1d6f#support an. Das originale Video ist ein mit einem Google Pixel 5 erstelltes Video in FullHD von unserem Kaninchen. Im Hintergrund hört ihr Umgebungsgeräusche und zwei kurze Sätze von mir. Download, sofern notwendig [hier](https://cloud.elearningdienst.de/index.php/s/NzxPYsDxF6YkTN6/download). Ich habe dir zu allen Videos in den blauen Info Boxen unter dem Video auch einen **Testlink** zur Verfügung gestellt, den du in **BigBlueButton und in H5P** und sicherlich auch in anderen Tools, die Video-URLs benötigen, ausprobieren könnt. Nicht klicken, sondern via Copy-Paste in die dafür vorgesehene Stelle in deine Software kopieren. :::success **Hinweis:** Ich habe hier das originale 1080p Video in ein 480p Video konvertiert. **Einzig und alleine um Bandbreite und Datenvolumen beim Seitenaufruf und den Testlinks zu sparen.** Natürlich gehen auch niedrigere oder höhere Auflösungen mit dem jeweiligen Videocodec! ::: ## H264/AAC <video poster="/apps/files_videoplayer/img/poster.png" src="https://cloud.elearningdienst.de/index.php/s/jya3yLR3oBS98Ac/download#.mp4" width="480" controls><source src="https://cloud.elearningdienst.de/index.php/s/jya3yLR3oBS98Ac/download#.mp4" type="video/mp4"></video> :::info **Testlink:** **```https://cloud.elearningdienst.de/index.php/s/jya3yLR3oBS98Ac/download#.mp4```** ::: ___ ## lib264 <video poster="/apps/files_videoplayer/img/poster.png" src="https://cloud.elearningdienst.de/index.php/s/JJSEe47b6Pt73Q6/download#.mp4" width="480" controls><source src="https://cloud.elearningdienst.de/index.php/s/JJSEe47b6Pt73Q6/download?#.mp4" type="video/mp4"></video> :::info **Testlink:** **```https://cloud.elearningdienst.de/index.php/s/JJSEe47b6Pt73Q6/download#.mp4```** ::: ___ ## WebM VP8 <video poster="/apps/files_videoplayer/img/poster.png" src="https://cloud.elearningdienst.de/index.php/s/tXCPHK6LiQggAap/download#.webm" width="480" controls><source src="https://cloud.elearningdienst.de/index.php/s/tXCPHK6LiQggAap/download#.webm" type="video/webm"></video> :::info **Testlink:** **```https://cloud.elearningdienst.de/index.php/s/tXCPHK6LiQggAap/download#.webm```** ::: ___ ## WebM VP9 <video poster="/apps/files_videoplayer/img/poster.png" src="https://cloud.elearningdienst.de/index.php/s/FnprGpWsSHc7Jyk/download#.webm" width="480" controls><source src="https://cloud.elearningdienst.de/index.php/s/FnprGpWsSHc7Jyk/download#.webm" type="video/webm"></video> :::info **Testlink:** **```https://cloud.elearningdienst.de/index.php/s/FnprGpWsSHc7Jyk/download#.webm```** ::: ___ ## Übersicht getester Betriebssystem / Browser Versionen ```csvpreview {header="true"} Betriebssystem,Browser,mp4,webm Ubuntu Linux 20.04,Chromium,ja,ja Ubuntu Linux 20.04,Firefox,ja,ja Windows 10 Pro (Build 21H1),Chrome,ja,ja Windows 10 Pro (Build 21H1),Edge,ja,ja Windows 10 Pro (Build 19042),Firefox,ja,ja Windows 10 Pro (Build 19042),Edge,ja,ja Android 11 (Google Pixel 5),Chrome,ja,ja Android 11 (Google Pixel 5),Firefox,ja,ja iPadOS 14.6, Safari,ja,nein iPadOS 14.6, Chrome,ja,nein iOS 14.6, Safari, ja,nein iOS 14.6, Chrome, ja,nein ``` Falls eure Kombination nicht aufgeführt ist, könnt ihr mir gerne mailen, dann nehme ich es auf: ulrich.ivens@elearningdienst.de ## Erstellen der Videos per Script ### Variante 1 Alle Videos habe ich mittels meines kleinen bash Scriptes ```convert2web.sh``` erstellt, welche das/die originalen Video in einem Rutsch in die Web-Formate konvertiert. Das sollte im Terminal von Linux und möglicherweise auch auf OSX funktionieren. Mit der Variable ```VIDEO_HEIGHT``` stellt ihr die Auflösung ein. Als Abhängigkeit ist lediglich ```ffmpeg``` mit den entsprechenden Codecs zu nennen. Unterhalb des Ordners mit dem Video wird der in der Variable ```TRANSCODE_FOLDER``` definierte Ordner angelegt, sofern er noch nicht exisitiert (Standard ist ```transcode```). Darin landen die transcodierten Videos. Aufruf mit: ```sh convert2web.sh Videoname``` ```bash= #/bin/bash # Foldersetting TRANSCODE_FOLDER="transcode" ## Check if path ist there otherwise create it if ! [ -d "$TRANSCODE_FOLDER" ];then mkdir $TRANSCODE_FOLDER; fi # Videosettings #VIDEO_HEIGHT=1080 #VIDEO_HEIGHT=720 VIDEO_HEIGHT=480 for j in $@; do \ ffmpeg -i $j \ -c:v h264 -preset slow -vf scale=-2:$VIDEO_HEIGHT \ -c:a aac -movflags -faststart \ $(echo $TRANSCODE_FOLDER)/$(echo "${j%.*}")_$(echo $VIDEO_HEIGHT)p_h264_aac.mp4 ffmpeg -i $j \ -c:v libx264 -preset slow -vf scale=-2:$VIDEO_HEIGHT \ -c:a copy -profile:v baseline -level 3 \ $(echo $TRANSCODE_FOLDER)/$(echo "${j%.*}")_$(echo $VIDEO_HEIGHT)p_lib264.mp4 # WebM VP8 # Pass1 ffmpeg -i $j \ -c:v libvpx -pass 1 -vf scale=-2:$VIDEO_HEIGHT \ -f webm -b:v 1M -crf 10 -y /dev/null # Generates ffmpeg2pass-0.log #Pass 2 ffmpeg -i $j \ -c:v libvpx -pass 2 -vf scale=-2:$VIDEO_HEIGHT \ -f webm -b:v 1M -crf 10 -qmin 0 -qmax 50 -acodec libvorbis \ $(echo $TRANSCODE_FOLDER)/$(echo "${j%.*}")_$(echo $VIDEO_HEIGHT)p_VP8.webm #WebM VP9 # Pass1 ffmpeg -i $j \ -c:v libvpx-vp9 -pass 1 -vf scale=-2:$VIDEO_HEIGHT \ -f webm -b:v 1M -crf 10 -y /dev/null # Generates ffmpeg2pass-0.log #Pass 2 ffmpeg -i $j \ -c:v libvpx-vp9 -pass 2 -vf scale=-2:$VIDEO_HEIGHT \ -f webm -b:v 1M -crf 10 -aq-mode 0 -c:a libopus -b:a 64k -y \ $(echo $TRANSCODE_FOLDER)/$(echo "${j%.*}")_$(echo $VIDEO_HEIGHT)p_VP9.webm done ``` ### Variante 2 Und hier noch eine zweite Script-Variante, nur für mp4 (h246/aac) Videos in unterschiedlichen Auflösungen. Mitels meines bash Scriptes ```convert2mp4.sh``` kann das/die originalen Video in einem Rutsch in das mp4 Web-Format in unterschiedlichen Auflösungen (in meinem beispiel 720p und 480p) konvertiert werden. Das sollte im Terminal von Linux und möglicherweise auch auf OSX funktionieren. Mit der Variable ```VIDEO_HEIGHT0``` und ```VIDEO_HEIGHT1``` stellt ihr die gewünschten Auflösungen ein. Als Abhängigkeit ist lediglich ```ffmpeg``` mit den entsprechenden Codecs zu nennen. Unterhalb des Ordners mit dem Video wird der in der Variable ```TRANSCODE_FOLDER``` definierte Ordner angelegt, sofern er noch nicht exisitiert (Standard ist ```transcode```). Darin landen die transcodierten Videos. Aufruf mit: ```sh convert2mp4.sh Videoname``` ```bash= #/bin/bash # Foldersetting TRANSCODE_FOLDER="transcode" ## Check if path ist there otherwise create it if ! [ -d "$TRANSCODE_FOLDER" ];then mkdir $TRANSCODE_FOLDER; fi # Videosettings VIDEO_HEIGHT0=720 VIDEO_HEIGHT1=480 for j in $@; do \ ffmpeg -i $j \ -c:v h264 -preset slow -vf scale=-2:$VIDEO_HEIGHT0 \ -c:a aac -movflags -faststart \ $(echo $TRANSCODE_FOLDER)/$(echo "${j%.*}")_$(echo $VIDEO_HEIGHT0)p_h264_aac.mp4 ffmpeg -i $j \ -c:v h264 -preset slow -vf scale=-2:$VIDEO_HEIGHT1 \ -c:a aac -movflags -faststart \ $(echo $TRANSCODE_FOLDER)/$(echo "${j%.*}")_$(echo $VIDEO_HEIGHT1)p_h264_aac.mp4 done ``` **Viel Spass mit den Scripten, die werden dir die Arbeit sicherlich erleichtern.** --- :::info ## Lizenzhinweis: Die Seite Codectest inkl. des Videos ist erstellt von Ulrich Ivens und steht unter der Lizenz [**CC BY-SA 4.0**](https://creativecommons.org/licenses/by-sa/4.0/legalcode.de). Die optional gezeigte *bash-Scripte* stellt lediglich Aufrufparameter von ffmpeg zusammen und fügt diese in eine triviale Schleife ein. Diese Basisfunktionen müssen nicht zitiert werden und stehen unter der Lizenz [**CC0**](https://creativecommons.org/publicdomain/zero/1.0/legalcode) :::