Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
de:create:media [13.02.2019 21:18]
admin [Probleme mit dem Speicherplatz]
de:create:media [08.06.2019 11:23] (aktuell)
jxh101 [Probleme mit dem Speicherplatz] typo
Zeile 88: Zeile 88:
 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"​);​
Zeile 97: Zeile 97:
 </​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>​
 +
 +
  
  
Zeile 127: Zeile 153:
 **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:
Zeile 201: Zeile 215:
 </​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:
de/create/media.1550089093.txt.gz · Zuletzt geändert: 13.02.2019 21:18 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki