|
|||
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 |
Sponsored Links |
|
|||
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 }); 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 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> 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;} |
Sponsored Links |
Stichwörter |
html5, jquery, kapitel, video |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |