3

I'm trying to write a piece of Javascript that switches between two videos at timed intervals (don't ask). To make matters worse, each video has to start at specific place (about ten seconds, and again, don't ask.)

I got the basics working by just using the YUI Async library to fire to switch the videos at intervals:

YUI().use('async-queue', function (Y) {
                        // AsyncQueue is available and ready for use.

                        var cumulativeTime = 0;
                        var q = new Y.AsyncQueue()

                        for (var x = 0; x < settings.length; x++) {

                            cumulativeTime = cumulativeTime + (settings[x].step * 1000)

                            q.add( {

                                fn: runVideo,
                                args: settings[x].mainWindow,
                                timeout: cumulativeTime
                            })
                        }

                        q.run()
                    });

So far, so good. The problem is that I can't seem to get the video to start at ten seconds in.

I'm using this code to do it:

function runVideo(videoToPlay) {

    console.log('We are going to play -> ' + videoToPlay)

    var video = document.getElementById('mainWindow')
    video.src = '/video?id=' + videoToPlay

    video.addEventListener('loadedmetadata', function() {

        this.currentTime = 10 // <-- Offending line!
        this.play();

    })
}

The problem is that this.currentTime refuses to hold any value I set it to. I'm running it through Chrome (the file is served from Google Storage behind a Google App Engine Instance) and when the debugger goes past the line, the value is always zero.

Is there some trick I'm missing in order to set this value?

Thanks in advance.

Robert Parker
  • 605
  • 4
  • 7
user2649981
  • 31
  • 2
  • Does setting the current time work after you run `this.play()`? I know many times browsers won't begin to preload videos until you play it, so it might have no idea how long the video actually is, so it defaults to 0. In addition, you can have the video automatically cut off the first 10 seconds by adding `#t=10s` to the end of the video URL in the ` – Pluto Aug 07 '13 at 16:53
  • Thanks for your reply, Pluto. I tried your suggestions, but the problems remains, unfortunately (even when adding the instruction to the end of the URL). I'm exploring the possibility that it could have something to do with byte range support on GAE. – user2649981 Aug 08 '13 at 07:51
  • 3
    I had the same issue using a non-caching http server for testing the site. (like pythons simpleHTTPserver). I could fix this issue easily by using node-static for example. Addendum: Apperently the web-server needs to support byte serving: http://stackoverflow.com/a/15145012/1525722 – chmanie Oct 08 '13 at 19:10

1 Answers1

1

Try use Apache server.

setCurrentTime not working with some simple server.

ex) python built in server, php built in server

HTTP server should be Support partial content response. (HTTP Status 206)

mikkame
  • 11
  • 2
  • 1
    Please try to use better English, because I have an impression that your answer maybe correct, but it is very hard to understand what you have written. – Mikayel Saghyan Sep 10 '20 at 10:59