✔ Problem bei video ab Zeitmarke abspielen mit currentTime

[guenter024]

Hallo tutorials-Freunde,
habe ein Problem bei der Verwendung von currentTime.
Ich möchte, dass man im html5-Player das Video von LowQuality auf HDQuality ändern kann.
Dazu klickt der Nutzer auf den Button mit der id "hdContent".
Wenn das Video gewechselt wurde, soll an der gleichen Zeitmarke wie zuvor weiter abgespielt werden.
Die letzte Zeitmarke wird in der Variablen t gespeichert.
Hier der Code:


Hier zunächst der Code:

var VideoID = $('video').attr('itemid');
var Video = $('video').get(VideoID);
$('#hdContent').on('click', function() {
                if(videoQualityStatus == "HD ist aus") {

                    var t = Video.currentTime;

                    videoQuality = "_720p.";
                    videoQualityStatus = "HD ist an";
                    $(this).text(videoQualityStatus);

                    var newVideo = videoDirectory + $(this).attr('data-href') + videoQuality + '<?php print $format; ?>';
                    Video.src = newVideo;
                    Video.load();
                    Video.play();
                    Video.currentTime += t;

                } else
                if (videoQualityStatus == "HD ist an") {

                    var t = Video.currentTime;

                    var loadCurrentTime = $('#curTime').text();
                    videoQuality = "_360p.";
                    videoQualityStatus = "HD ist aus";
                    $(this).text(videoQualityStatus);

                    var newVideo = videoDirectory + $(this).attr('data-href') + videoQuality + '<?php print $format; ?>';
                    Video.src = newVideo;
                    Video.load();
                    Video.play();
                    Video.currentTime += t;

                }
            });

Das ganz ist in einer etwas größeren Funktion, die nach $(document).ready aufgerufen wird.
Komischerweise ist es so, wenn ich nach Video.play() ein alert(t) aufrufe, funktioniert es ....

Woran liegt das, bzw. wie komme ich hier auf einen grünen Zweig?

Vielen Dank im Voraus für eure Hilfe.

 

[guenter024]

Habe den Code noch etwas geschrumpft und nochmal hier mit eingefügt.
Bitte beachtet das alert(t).
Wenn ich diese auskommentiere, dann springt er zur Zeitmarke, ansonsten wird das Video von vorne abgespielt.
Ich habe keine Ahnung wieso...

            var videoDirectory = 'download/videos/';

            var VideoID = $('video').attr('itemid');
            var Video = $('video').get(VideoID);

            var videoQuality = "_360p."
            var videoQualityStatus = "HD ist aus";

            $('#hdContent').on('click', function() {

                if(videoQualityStatus == "HD ist aus") {
                    videoQuality = "_720p.";
                    videoQualityStatus = "HD ist an";
                } else
                if (videoQualityStatus == "HD ist an") {
                    videoQuality = "_360p.";
                    videoQualityStatus = "HD ist aus";
                }

                var t = Video.currentTime;
                $(this).text(videoQualityStatus);
                var newVideo = videoDirectory + $(this).attr('data-href') + videoQuality + '<?php print $format; ?>';
                Video.src = newVideo;
                Video.load();
                Video.play();
                // alert(t);
                Video.currentTime += t;

            });

EDIT:
Habe nun die Konsole gestartet und bekomme die Fehlermeldung
"InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable"
Video.currentTime += t;

Aber wieso funktioniert es dann mit alert ?

 

[guenter024]

Da mir hier anscheinend niemand weiterhelfen kann (tutorials ist wohl nicht so Javascriptlastig) möchte ich nur mitteilen, dass ich mein Problem auch im jquery-Board gepostet habe (nicht dass sich jemand hier drüber aufregt) ...


Sollte hier trotzdem jemand die Lösung haben bitte bitte posten :-D .
Sobald es gelöst ist gebe ich hier auf jeden Fall Bescheid.

Vielen Dank.

 

[Sempervivum]

Möglicherweise muss der Browser erst Daten des Videos laden, bevor er das Setzen von currentTime verarbeiten kann. Probier mal das Event play:

             Video.bind("play",function(){
                   Video.currentTime += t;
                });
                Video.src = newVideo;
                Video.load();
                Video.play();

Möglicher Weise ist auch nur das Auslesen von currentTime für die Addition das Problem, dann müsste helfen, wenn Du einfach schreibst: Video.currentTime = t; (nach dem Laden sollte currentTime sowieso auf 0 stehen).
Die Events habe ich hier gefunden:
http://www.w3.org/html/wg/drafts/html/master/embedded-content.html#mediaevents

 

[guenter024]

Hallo,

die Addition hat keine Auswirkung.
Ich denke aber auch dass es daran liegt, dass das Video noch nicht geladen wurde.
Habe aber bereits alle Events ausprobiert, die mir einfielen, um zu prüfen, dass das Video geladen wurde,
Gibt es eine dem alert() ähnliche Javascript-Funktion, die nur nicht den prompt auslöst?

 

[Sempervivum]

Hat das mit dem Play-Event nicht geholfen?
Der Grund, dass es mit dem alert() funktioniert, ist sicher, dass eine gewissse Zeit verstreicht, bis man dieses geschlossen hat. So etwas wie sleep unter Unix gibt es, AFAIK, in JS nicht. Du kannst jedoch eine Verzögerung mit setTimeout() erreichen. Wäre aber IMO nicht so sauber.
Wenn es dann nicht funktioniert, dann poste doch mal die URL deiner Seite, damit man es sich in Aktion ansehen kann.
PS: Hast Du mal überprüft, ob die Events überhaupt triggern?
Edit: Ich hab's mal ausprobiert und mit dem Event "loadeddata" funktioniert es.

 

[guenter024]

Yippie, das wars.

// .....
Video.src = newVideo;
videoPlay();
Video.onloadeddata = function() {
Video.currentTime = t;
}

Vielen Dank