6.002x Video: First Impressions
MITx launched it’s first course today, 6.002x. (You can still sign up through today or tomorrow based on what I saw in the Twitterverse, though I’m not seeing an enrollment close date on the website.)
What I’ll highlight today (maybe there will be more installments) is how they’re handling video content.
Here’s a screenshot of a page with video with four key elements.
[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]
6.002x Week 1 - S1V1 Motivation for 6.002x
- The video is hosted via YouTube.
- The video can be played back at multiple speeds.
- The video includes closed captions (CC).
- The closed captions are displayed outside the frame of the video, that allow the user to see multiple lines and navigate through the video by clicking on the caption.
It’s worth mentioning that I’m approaching things with these assumptions:
- MITx has already stated:
The course web site was developed and tested primarily with Google Chrome. We support current versions of Mozilla Firefox as well. The video player is designed to work with Flash. While we provide a partial non-Flash fallback for the video, as well as partial support for Internet Explorer, other browsers, and tablets, portions of the functionality will be unavailable.
- While I think it’s shortsighted to not fully support upwards of 77% of web users (based on Wikimedia data from December 2011), why not go all the way? People using MITx can be expected to be crazy motivated to participate, downloading and installing Chrome is probably not going to deter them. (Those that are going to complain about IE support, are going to complain anyway).
- Why not push HTML5 as the default for video? There is a great feature that YouTube provides for HTML5 video playback–the ability to change speed and control caption display at the same time. It’s better to handle the playback speed in the player and not the source. (This ties into the item below.) For those browsers that don’t support HTML5 video, the YouTube player will fall-back to Flash (“falling back” used appropriately here, HTML5 Video is the future, at least for the next few years) and give users at least 1x playback.
- I’m not as much concerned about the first course as I am about the second, third, and twentieth course. I think there’s a lot that’s known about best practices of developing online courses from both pedagogical and production perspectives. I wish we were learning, and implementing, those lessons from the get go. (It’s not like we haven’t fallen into this exact same trap before.)
- With respect to video, producing 4 versions of each video is kinda crazy from a production perspective. (How do I know? I know the guys editing the videos. Plus the playback speeds don’t match those in YouTube’s HTML5 player, meaning they aren’t using default functionality.)
- I think it’s important to use existing tools where possible, there’s no need to design your own when an existing (supported) tool will do 80% of what you need.
- Take a look at the page code, just looking at the code for the currently playing video:
<object data="MITx%206.002x_files/apiplayer" id="myytplayer" type="application/x-shockwave-flash" height="385" width="640"><param value="always" name="allowScriptAccess"><param value="#cccccc" name="bgcolor"><param value="transparent" name="wmode"><param value="true" name="allowFullScreen"><iframe id="html5_player" type="text/html" frameborder="0">
Which relies on:
var id9d3d58a4aab3b918a113ea043d79461ainit_functions=[/fusion_builder_column][fusion_builder_column type="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none"]["",
function(){ var streams={"1.5": "q1xkuPsOY6Q", "1.0": "4rpg8Bq6hb4", "0.75": "KLim9Xkp7IY", "1.25": "9WOY2dHz5i4"}
var params = { allowScriptAccess: "always", bgcolor: "#cccccc", wmode: "transparent", allowFullScreen: "true" };
var atts = { id: "myytplayer" };// If the user doesn't have flash, use the HTML5 Video instead. YouTube's
// iFrame API which supports HTML5 is still developmental so it is not default
if (swfobject.hasFlashPlayerVersion("10.1")){
swfobject.embedSWF(document.location.protocol + "//www.youtube.com/apiplayer?enablejsapi=1&playerapiid=ytplayer?wmode=transparent",
"ytapiplayer", "640", "385", "8", null, null, params, atts);
} else {//end of this URL may need &origin=http://..... once pushed to production to prevent XSS
$("#html5_player").attr("src", document.location.protocol + "//www.youtube.com/embed/" + streams["1.0"] + "?enablejsapi=1&controls=0");
$("#html5_player").show();var tag = document.createElement('script');
tag.src = document.location.protocol + "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Make sure the callback is called once API ready, YT seems to be buggy
loadHTML5Video();
}As compared with:
<iframe width="420" height="315" src="http://www.youtube.com/embed/4rpg8Bq6hb4?html5=1" frameborder="0" allowfullscreen></iframe>
- Take a look at the page code, just looking at the code for the currently playing video:
Here’s a mockup I put together to show the HTML5 embed player with the basic 6.002x chrome. If you view the mockup in the Chrome browser (the speed control will sometimes showup in the latest versions of Safari and Firefox, but not reliably so in my experience), you’ll be able to switch video playback speed on the fly and have the overlay closed captions displayed. The out-of-frame captions are not linked to the video playback in this mockup; I’m confident that they can be linked since they are in the live version. And all the chrome isn’t displaying properly for some reason–I didn’t spend the time track this down issue.
Alternate View - S1V1 Motivation for 6.002x - Use Google Chrome browser
Total time: About an hour of investigation into the YouTube HTML5 player and it’s playback speed controls, to find out it can be forced on an embedded video, finding the 1.0x YouTube video (it’s not publicly searchable at YouTube, but can be direct linked), and putting together the basic mockup. Then about another two hours to write up this post and pull out the code examples.
Addendum: I just got a chance to take a look at the lecture videos from my iPad 1. Unfortunately, I can see that the site is trying to load the videos (presumably using HTML5), but they never finish loading. I just get the white spinning wheel of doom. :(
Side-by-Side Comparison of 6.002x Video on an iPad - Default Site (l) and Mockup (r)
[/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
I’d love to go all HTML5. The problem is YouTube HTML 5 is experimental. Google doesn’t guarantee that their HTML5 API will continue to work next week — indeed, if you try using it to do anything more complex, you’ll find it has several significant bugs that substantially degrade the UI experience. We guarantee support for Flash video, and pending Google’s official, non-beta, bug-free HTML5 support, only unofficially support HTML5 video.
With regards to browser support, we had three choices: (1) Require students to buy Matlab (2) Limit browser support to browsers where we could provide equivalent functionality (3) Eliminate types of labs impossible to implement in IE. This was not an easy choice, but we went with (2). It is out goal to have everything on the web site — except those specific labs — work without issues in IE back to IE8.
Piotr, thanks for your comments.
Sure HTML5 is experimental. We know it’s not going to go away though, HTML5 Video *is* the future of video on the web. Given the way Google works, it’s not likely to go out of beta anytime soon. (I don’t think that mentality is going to change anytime soon. I was joking with someone earlier this week, it’s amazing Search isn’t still in beta.)
Even if the HTML goes away, the embed player should fall back to Flash, just as it does now, right? And where are you then? Playback of video at normal speed with closed captions — aka perfectly functional. That’s when I’d add in additional flavors. At one level I think it’d be fine to use the HTML5 player as-is, skip the scrolling transcript (which is of limited functionality in any event, since you can’t scroll through the whole thing to jump to a point that’s off screen, or search the transcript–at least I wasn’t able to when I tried.) From a UI/UX perspective, YouTube’s Interactive Transcript on their Flash/HTML5 videos is a much more interesting/useful implementation–it allows access to the whole video via caption lines and is in-page searchable. Or even Ted’s implementation which supports additional languages.
Lastly, did you try the “just call YouTube/Google and ask?” approach? They *will* take a call from MIT, I gotta believe. What with I’m sure are Anant’s contacts, I know are Hal’s contacts, heck we can even go through Esther from an “open” perspective to get to the right people there, to (a) understand if they’d pull the feature–they won’t say when, but I’d have to believe you could get an NDA – “no we aren’t planning on doing it in the next 3 months” or (b) get some engineers to look at the API issues on a faster schedule. There are few places that can get that kind of access, MIT is one of them.
I still stand by the assumption that if you’re going to limit things, just require Chrome. It’s an inconsistent experience now. It’s also not clear what, how and when things are going to work or not. Instead of:
This doesn’t tell me what does and doesn’t work, I’m left to have to experiment. Right now it’s awfully complex because of the uncertainty. Perhaps a table that shows what does/doesn’t work (even if crowd-sourced)?
I know that you guys had a couple things like automatic scoring of MATLAB and the circuits diagram stuff working for years. But with respect to MATLAB, would their cloud offering work? Have you had a discussion with MathWorks about contributing compute ability for this course to obviate the need for a license (limit access based on referrer from a MIT IP and/or via Akamai)? It’s a great demonstrator for them, and useful for the course. Just a thought.
Hi Brandon,
Interesting couple of posts about the features in YouTube and how to use the captioning and speed up features. I am following the MITx course and this would make a real difference to the usability of those videos for me. In general I watch on 1.5x and try to pay attention to the written words – I also would like to watch with the sound off but tracking image and words is too difficult – much better with proper on screen subtitles. This does make a difference – I stopped watching rather than have the sound on (I was too lazy to go and get the headphones!) and the captions to the side did not enable to keep track
I think I have found the way to do this for other videos so may try a watching the next batch in this way. It would be good to have video like this – though I can also see Piotr’s point as it is also good to be able to page forward and not have the distractions that YouTub supplies.
I will also point the people involved in developing the Open University’s accessible video player. They may well be using some of this stuff already but I am not sure.
Thanks again,
Patrick.