zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden HTML5 Video Chapter externe Text-Elemente

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.07.2012, 14:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 17.07.2012
Beiträge: 1
Student befindet sich auf einem aufstrebenden Ast
Standard HTML5 Video Chapter externe Text-Elemente

Hallo zusammen,

ich soll grade eine Prüfungsaufgabe mit SMIL lösen. Dabei geht es darum, ein Schulungsvideo mit externen Grafiken und Texten, also außerhalb des Videos aber synchron zum Video anzuzeigen.

Ich vermute mal, dass das Lehrmaterial etwas alt ist und HTML5 sowas in Zukunft übernehmen könnte.

Bisher habe ich rausgefunden, dass man ein Video in Kapitel unterteilen kann, aber noch nicht wie und ob man auch externe Elemente an die Kapitel binden kann.

Wenn das geht, dann wäre ein einfaches Beispiel echt toll. Die Alternative ist eben SMIL - damit wäre das ne schnelle Sache für mich - nur kennt das keiner

Theoretisch würde mir da einfallen, mit Javascript zu arbeiten. Bezüglich JQuery erinnere ich mich schwach daran, dass man DOM-Elemente überwachen kann. Hier wäre mein Ansatz: Ich teile den Screen in 4 Quadrate (1x Video, 1x Text, 2x Animation) und überwache jeweils den Video-Qadrant. Abhängig vom Kapitel lade ich z.B. Textelemente aus einer XML-Datei...

Also - ihr seht, ich denke und lass mir das nicht abnehemen. Aber etwas Orientierung wäre echt klasse
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.08.2012, 15:53
Benutzer
neuer user
 
Registriert seit: 02.01.2011
Beiträge: 66
Luziefer befindet sich auf einem aufstrebenden Ast
Standard

also wenn ich das richtig verstehe willst du zu dem video text mit ausgeben dfer dann angezeigt wird wenn das viedo startet?

Da gibt es eine lösung für
dies ist der js code dafür
Code:
$('audio,video').mediaelementplayer({
	// auto-select this language (instead of starting with "None")
	startLanguage:'en',
	// automatically translate into these languages
	translations:['es','ar','zh','ru'],
	// enable the dropdown list of languages
	translationSelector: true
});
den bndest du am besten unter dem </video> ein
desweiteren braucht du noch die .srt datei wo die informationen drinne stehn
Code:
0
00:00:02 --> 00:00:05
textfeld 2sec-5sec

1
00:00:05 --> 00:00:10
textfeld 5sec-10sec 

2
00:00:10 --> 00:00:15
textfeld 5sec-10sec

3
00:00:15 --> 00:00:25
textfeld 15sec-1min38sec

4
......

5
...usw
mit diesen teilen kannst du festlegen an welcher stelle (zeit) der text angezeigt wird.
das ganze schaut dann in dem html code so aus

Code:
<p class="video">
<video id="player2" class="bg-video" width="408" height="229" poster="poster.gif" controls="controls">
<source src="Video/video.mp4" type="video/mp4">
<source src="Video/video.ogv" type="video/ogg">
<track kind="subtitles" src="media/mediaelement.srt" srclang="en" /> 
Your browser leaves much to be desired.			
</video>	
<script src="js/mediaelement.js"></script>
</p>
die position musst du noch mit css bearbeiten da es im video angezeigt wird.aber das wirst du noch brauchen dafür
Code:
.captions-position{position:absolute;width:100%;bottom:5px;left:0;}
.captions-position-hover{bottom:5px;}
.captions-text{padding:1px 5px;background:url(../images/background.png);background:rgba(20,20,20,0.8);}
.clear{clear:both;}.me-cannotplay a{color:#fff;font-weight:bold;}
.cannotplay span{padding:15px;display:block;}
ich hoffe ich konnte dir helfen
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
html5, jquery, kapitel, video

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Text in div positionieren KeithKeith CSS 1 16.05.2010 22:37
frage zur umsetzung (siehe anhang) mmiethe79 CSS 4 01.04.2009 16:10
Zeilenabstand bei font-Angabe wieder weg nick CSS 7 16.02.2008 15:39
Float hängt sich durch's padding durch. nick CSS 3 16.01.2008 20:24
IE tanzt aus der Reihe und ich dreh am Rad DocO CSS 22 25.11.2004 16:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:16 Uhr.