Getting video time from player

[Colin Fredericks]

Hello there.

I'm trying to do something with video in edX that I really think should be possible, but which I haven't been able to figure out so far.

The goal: Pause a video at a particular time. Show a piece of content (e.g. HTML page). Continue the video afterwards. We've had like a dozen professors ask for this functionality, especially those who've seen other platforms where it is.

The problem: I cannot seem to get the time from the video player. I've managed (with help from StackOverflow) to work out something that sends play and pause events, but I can't get anything back from it. I've also tried to create a second javascript "player" object (via the YouTube API), but, contrary to YouTube's documentation, it really seems to cause issues if there are two player objects for the same video.

I'm open to suggestions. I'd prefer not to be overly hacky about it (i.e. no reading the time off the screen with jQuery), but I'm perfectly ok with bringing in other packages/modules if that's what it takes. I am sadly limited to the base edX platform, so I can't make changes to the video XBlock.

Any suggestions?

[Marceau C.]

In javascript, you get the current time of an HTML5 video with the currentTime attribute.
Youtube uses complex tricks to make its video player work so it doesn't use the default HTML5 video API, but default HTLM5 is rather easy to understand and manipulate.
Try to do it for pure HTML5 videos, and then you can try to do it with the fancy Youtube API.

document.getElementsByTagName('video')[0].currentTime


Here is the list of all HTML5 events and attributes:
http://www.w3.org/2010/05/video/mediaevents.html
You can see the timeupdate event.

So you just have to do something like
$('#myvideo').on('timeupdate', function() {
    if video.currentTime > popupTime and previousTimeupdateEventTime < popupTime) {
        video.pause();
        cleanPopupBlock();
        displayThePopup();
    }
    previousTimeupdateEventTime = video.currentTime;
});


To do this, you will need to create a new XBlock.
This will require some work to create such a XBlock (I don't know if you are already familiar with XBlock development or not).


Marceau C.

[Anton Stupak]

For now, you can get the time from 'video-player-state' data attribute that is added for the DOM element with class name `.video`.  

See example how to do that:

var state = $('.video').data('video-player-state');

var time = state.videoPlayer.currentTime;

Also, we're triggering the following events for internal needs: 

`play`, `pause`, `seek`, `ended`, `speedchange`, `volumechange`, `qualitychange`. But they aren't well normalized between different player modes.

Think we should also extend this list with `progress` event that will give you the time.

You can use events so:

$('.video').on('pause', function () {

  // Do something on pause

});

[Colin Fredericks]

Beauty - Anton's method works without having to write an XBlock.

Once I have a more production-ready version of what I'm working on I'll post it here.

[Colin Fredericks]

Progress is not bad so far. I've got things working in Chrome and Firefox. However, Safari (7.0.5) fails hard. 

Anton, are there known issues with any of the stuff you mentioned and Safari? When I hit play I'm getting literally about a hundred error messages that say:

[Error] Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://edge.edx.org". Protocols, domains, and ports must match.

...as well as things like...

[Error] TypeError: 'undefined' is not an object (evaluating 'state.videoPlayer.currentTime')

that I don't get in Chrome or Firefox.

[David Baumgold]

Sounds like you're running into the "Same-origin policy" browser restrictions: https://en.wikipedia.org/wiki/Same_origin_policy I'm not sure why Safari is more restrictive than Chrome and Firefox, though.

-David Baumgold

[Colin Fredericks]

Maybe Safari is just more verbose about reporting it? Not sure.

As it turns out, those 100ish errors (though still worrisome) weren't the problem. The issue was primarily that the video simply hadn't loaded yet when I tried to start doing things to it. Waiting more time was effective, but not a good solution. I tried using YouTube's onYouTubePlayerReady() function from their API, but got no luck there at all - it's probably already used by edX and multiple copies would conflict. 

I've added a loop that checks every 100ms to see whether the video data is ready, using if(typeof $('.video').videoPlayer != 'undefined'). It's not working perfectly yet (clearly I'm testing the wrong thing), but it's an improvement.

[Colin Fredericks]

Success!

Check it out: 

https://edge.edx.org/courses/HarvardX/HXDEMO/2014/courseware/98e2362d5cfa4fee908ff8db31405795/6065c638713e4cbb92096c9663127d72/1

Hit "play" and you should see four different questions pop up in the first few minutes. There are controls underneath the video for resetting, skipping questions, and going back one question.

Suggestions and feedback are welcome. I'm working to really make this production-ready.

[Alison Hodges]

Hi Colin, please keep me and the doc team at edX in mind. I'd like to start including more "how to" use cases in the Research Guide, and this seems like it would be a valuable addition.
Thanks!
Alison

[Colin Fredericks]

Will do. I'll send you an e-mail and we can coordinate.

[Carlos Andrés Rocha]

Hi Colin, that is pretty cool!

Do you know if it has side effects on the log events emitted by the video player? Course teams and researchers use those events to analyze the course usage.

Thanks,

Carlos

[Colin Fredericks]

I created some new listeners for pause and play events, but that shouldn't turn off other listeners created by edX. (In fact, if it did, the video controls wouldn't work any more, which is what happened with some of my early attempts.) There will be a number of extra log events from my listeners and other places in my code, but none of the existing ones should be suppressed.

You can see which events are logged by searching for Logger.log(blah) commands in my javascript file. I tried to be fairly extensive but not go overboard.

[Carlos Andrés Rocha]

It would be good to do some testing, otherwise the data will be lost and a few people would not be happy about that. 

One more question, have you considered doing your video player as a separate xblock? Having the functionality in the course content works, but it is fragile and could lead to all kinds of unexpected problems. It is not encourage to develop functionality in the context nowdays, since we have other clear extensions points.

Thanks! 

[Colin Fredericks]

I'm going to check with the folks who receive our data here and see if the events have been logged properly this week. I can't imagine that anything I could do would turn off edX's logging unless I was calling a stopPropagation() or preventDefault() when I catch events (which I'm not), but you're right, it's worth checking.

I simply don't have the expertise to create an XBlock. Also, we run on edX.org, not on our own server - even if I did create an XBlock, I'm not sure how long it would take to get it into the server. I would love to know how to create more durable things than I do, but after looking at the documentation for XBlocks I basically threw my hands up and walked away from that idea. Maybe I'll look again in six months.

[Colin Fredericks]

That said, if someone else wants to create an XBlock that uses this approach or a similar one, feel free. My code is your code.

[Carlos Andrés Rocha]

My main concern is that we may be missing events. Note that the events I am referring about are not the Javascript events, but the tracking log events. I am not sure that the video player was implemented with the consideration to be modified externally. Having said that, if you are using its public API should be safe as longer as it is not changed. I just want to make you aware of the trade-offs.

[Leonardo Salom]

Hi, 

You have the code uploaded somewhere so i can check if i can convert that into an XBlock?

[Leonardo Salom Muñoz]

Nevermind i’m gonna guess the zip file is all you got, ill check it out :).

[hsin han]

hi,

this might be Colin's repository https://github.com/Colin-Fredericks/edx-embedded-video-problems

Leonardo Salom於 2014年8月26日星期二UTC+8下午8時00分35秒寫道：

[Colin Fredericks]

Yup, that's it. It was posted in another thread; thanks for copying it here.

Comments are welcome. I'm hoping to go through and spruce it up at some point (for instance, I'm not sure I need the problem counter and might be able to do things better), and any successful changes will be reflected both in the zip file and in the GitHub repository.