| Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision |
| de:create:media [15.11.2018 15:15] – admin | de:create:media [08.06.2019 11:23] – [Probleme mit dem Speicherplatz] typo jxh101 |
|---|
| window.addEventListener("load", function() { | window.addEventListener("load", function() { |
| window.setTimeout(function() { | window.setTimeout(function() { |
| var audio = document.getElementById("audio04"); | var audio = document.getElementById("audio04"); |
| if (audio.paused) { | if (audio.paused) { |
| audio.setAttribute("controls", "yes"); | audio.setAttribute("controls", "yes"); |
| </script> | </script> |
| </code> | </code> |
| | |
| | Ebenfalls mittels JavaScript kann man die Steuerung der Audio-Datei auch noch weiter verfeinern. So kann man über das JavaScript-Ereignis (Event) ''ended'' etwa nach dem Abspielen der Audiodatei automatisch zur nächste Seite weiterleiten. |
| | |
| | <code html> |
| | <audio id="audio05" preload controlsList="nodownload" autoplay> |
| | <source src="someAudio.mp3"> |
| | </audio> |
| | <script type="text/javascript"> |
| | <!-- |
| | window.addEventListener("load", function() { |
| | window.setTimeout(function() { |
| | // Audio-Element anhand der ID identifizieren |
| | var audio = document.getElementById("audio05"); |
| | // Kontrollelemente einblenden, falls das Video nicht automatisch anläuft |
| | if (audio.paused) { |
| | audio.setAttribute("controls", "yes"); |
| | } |
| | // Nach dem Abspielen automatisch weiter zur nächsten Seite |
| | audio.addEventListener("ended", SoSciTools.submitPage); |
| | }, 250); |
| | }); |
| | // --> |
| | </script> |
| | </code> |
| | |
| | |
| |
| |
| **Wichtig:** Sehr alte Versionen des Internet Explorers (bis Version 8) unterstützten das ''<video>'' Tag nicht. In Deutschland sind das ca. 3% der Internet-Nutzer ([[http://caniuse.com/#feat=video|Can I use: Video element]]). | **Wichtig:** Sehr alte Versionen des Internet Explorers (bis Version 8) unterstützten das ''<video>'' Tag nicht. In Deutschland sind das ca. 3% der Internet-Nutzer ([[http://caniuse.com/#feat=video|Can I use: Video element]]). |
| |
| Um das Video in die Formate mp4, ogg und webm zu konvertieren, können Sie unterschiedliche Software verwenden. Recht komfortabel funktioniert es bei [[https://cloudconvert.com/|CloudConvert]] (online) und der [[http://www.videolan.org/vlc/|VLC Media Player]] (offline) kann ebenfalls dafür eingesetzt werden. Gehen Sie beim VLC wie folgt vor (basierend auf [[http://klaesimage.com/wordpress/?p=265|Using VLC Media Player to convert video]]): | Um das Video in die Formate mp4, ogg und webm zu konvertieren, können Sie unterschiedliche Software verwenden. Recht komfortabel funktioniert es bei [[https://cloudconvert.com/|CloudConvert]] (online, kostenlos für kleinere Dateien) und mit dem [[MiroVideoConverter|http://www.mirovideoconverter.com/]]. |
| | |
| * VLC Media Player öffnen | |
| * Menü: Medien -> Konvertieren/Speichern | |
| * Datei -> File Selection -> Add -> Video auswählen | |
| * Konvertieren/Speichern | |
| * Einstellungen -> Profil: "Video - H.264 + MP3 (MP4)" | |
| * Ziel -> Zieldatei -> Durchsuchen -> Verzeichnis auswählen und Dateiname mit Endung .mp4 angeben (z.B. video.mp4) | |
| * Start | |
| | |
| Evtl. müssen die Einstellungen für das Video (dort wo man das Profil auswählt) noch angepasst werden -- zum Beispiel die Video-Bitrate. | |
| | |
| Dieses Procedere wird mit den Profilen "Video - VP80 + Vorbis (WebM)" -> Dateiendung ".webm" und "Video - Theora + Vorbis (OGG)" -> Dateiendung ".ogg" wiederholt. Öffnen Sie alle drei Dateien, um das Ergebnis (Qualität von Bild und Ton) zu überprüfen. | |
| |
| In SoSci Survey erstellen Sie nun einen neuen [[:de:create:texts|Textbaustein]] mit folgendem HTML-Code als Inhalt: | In SoSci Survey erstellen Sie nun einen neuen [[:de:create:texts|Textbaustein]] mit folgendem HTML-Code als Inhalt: |
| </code> | </code> |
| |
| **Wichtig:** Der Onlinespeicher muss (!) per HTTPS aufrufbar sein. Wenn man versucht, in einer Fragebogen-Seite, die mittels HTTPS verschlüsselt übermittelt wurde, einen unverschlüsselten HTTP-Inhalt einzubinden, dan blockieren das die meisten Browser. | **Wichtig:** Der Onlinespeicher muss (!) per HTTPS aufrufbar sein. Wenn man versucht, in einer Fragebogen-Seite, die mittels HTTPS verschlüsselt übermittelt wurde, einen unverschlüsselten HTTP-Inhalt einzubinden, dann blockieren das die meisten Browser. |
| |
| Falls man keinen Zugriff auf eigenen Online-Speicher hat, kann man auf den Anbeiter [[https://www.dropbox.com/|Dropbox]] zurückgreifen. Dort kann man Links erzeugen, um die Dateien freizugeben. Aber damit diese dann im Fragebogen verwendet werden können, muss man dafür sorgen, dass Dropbox direkt die Mediendatei liefert und keine Download-Seite. Dafür muss man den Parameter ''dl=1'' im Link setzen bzw. ändern: | Falls man keinen Zugriff auf eigenen Online-Speicher hat, kann man auf den Anbeiter [[https://www.dropbox.com/|Dropbox]] zurückgreifen. Dort kann man Links erzeugen, um die Dateien freizugeben. Aber damit diese dann im Fragebogen verwendet werden können, muss man dafür sorgen, dass Dropbox direkt die Mediendatei liefert und keine Download-Seite. Dafür muss man den Parameter ''dl=1'' im Link setzen bzw. ändern: |
| <source src="https://www.dropbox.com/s/eccvtg69sxl8ume/video001.mp3?dl=1" type="video/mp4" /> | <source src="https://www.dropbox.com/s/eccvtg69sxl8ume/video001.mp3?dl=1" type="video/mp4" /> |
| </code> | </code> |
| | |
| | **Warnung:** In Safari (Apple/MacOS) wurden Probleme mit der Einbindung von Dropbox berichtet. An den Safari-Browser liefert Dropbox offenbar nicht die Mediendatei, sondern eine HTML-Datei. Dies führt dazu, dass Mac-Nutzer das Video nicht ansehen können. |
| |
| **Warnung:** Dropbox kann die Möglichkeit zum direkten Download jederzeit einschränken. | **Warnung:** Dropbox kann die Möglichkeit zum direkten Download jederzeit einschränken. |
