Dallas Seminary has been doing video-based online education for about 5 years now. One of the initial goals was to replicate the classroom teaching experience as much as possible by including the video and the professor's illustrations (Powerpoint, Keynote, etc.). Beyond that, we also wanted to enhance the experience by adding things like a transcript and editing down the video to the most important segments.
Our initial player was created by Yahoo!'s Broadcast.com division and it used HTML frames and Windows media. This limited us to Internet Explorer, but there was no other option at the time. Then Flash 7 came out with video support and I custom built the player below. Since then, video on the web has come a long way, and the introduction of H.264 support means that we only need one format for playing on the web and on the desktop.
Here is the original design using 320×240 video and 480×360 slides:
Here are some changes we wanted to make:
- Move from Flash 8 to 9 – use AS3 and enable fullscreen support
- Use H.264 video – to simplify our workflow
- Increase the video size, quality, and availability
- Some users found the auto-scrolling transcript distracting and we need another option for them
- Many classes don't have slides, so we need to de-emphasize those, yet also provide a good slide navigation system.
- More narrow player – the current design is about 850px which makes it hard to have many more windows open at the same time.
Here are wireframe mockups of various design proposals
- First player (2003) using Yahoo!'s Broadcast.com using HTML/Frames/WMV
Obviously, WMV is limited to really working in IE, and we were stuck with Yahoo!'s platform.
- Flash player with 320×240 video
This player is wider since the slides are bigger, but the transcript is more narrow column which makes it easier to read.
New Designs
- Swapped video and slides sizes, controls at the bottom
This swaps the video and slide sizes. It's nice, but the transcript is far away and the slides are hard to read. The player is also still very wide.
- Larger video size, small slides on the side
To make the video even bigger, the transcript is now a single line like closed captioning on TV. Rather than give the slides their own dedicated space, the slides have a tray on the right and the full size slide appears over the video for a few seconds. The width is slightly smaller, but not much.
- Coverflow Style Player
To make the player more narrow (for multi-tasking), we move the slides to the bottom and use the Apple CoverFlow to show a lot of them at once. This makes the player more narrow which is good, but also taller. To shorten it, we've moved all the controls on top of the video that appears/diasppears on mouse hover.
Here is a screenshot of a fairly common desktop size (1680×1050) with MS Word and a preview version of this player open. (note: I've made sure the controls are visible for the screenshot, but they are hidden normally)
This seems effective, but there is a possible drawback in that the Coverflow might be somewhat distracting to some students (it can be turned off). Also, some may prefer the older style transcript with more than one line visible at once.
Links to preview the players:
- Old Player: http://my.dts.edu/player/
- Coverflow: http://my.dts.edu/player2/
Another future goal is to build the player as an AIR application so that videos can be downloaded for offline use.
I think being able to have the option to see the video in a larger format would be awesome. I found that I liked the auto-scrolling transcript because the window allowed me to see what was said and scrolling was easy when I missed something. I can’t remember if I could scroll the text and take the video to that point but that would be helpful. I like the coverflow option a lot. Looking at your mockup it looks like an upgrade! But could you put the auto-scrolling transcript below the coverflow. I like the narrower version but I think it could be longer since the space below would be wasted screen space anyway. Just my two cents 🙂
Thanks for your comments. I’ll look at adding the scrolling transcript back in there somehow. I have wondered if a lot of students would want it, so your feedback is really important.
Hi,
Could you help us with one sample project to understand how to dev similar for churchs in my country. In general could you add project for no specialised solution, generic .net projects. I tried your others post like Flash video player and I’m not able to add to a not BlogEngine solution. Your work is fantastic, thanks to share with us. Regards
Hi John,
Could you explain, how are built the working files like transcripts and slides?. Have you one special tool to build adding cue points, or is hand made. I have seach speech regconition technics but today nothing at horizont. Have you some tools to share with us like cuepoints or slide xml builders, print slides or print transcripts. Load you the ppt or you export slides as jpg and later import in some database. Could you contact me at email for share with me your great work.Regards to the team. Romi.
Romi,
We have a series of xml files with timecodes in them and then use Flash’s timecue system. We have some tools that help create these, but they aren’t really for general consumption.
*nudge* *nudge* update…
i want to know how to create the online media player and their required tools
John:
You do awesome work. I just tested the beta version in the Gospels class. It was fantastic. In an earlier post you referenced a desire to know if student value to the scrolling text. I value it tremendously. It aids in retention. By trade, I am a trial lawyer. We do jury testing exercises on a regular basis administered by a communications specialist. We use scrolling text during the mock presentations (as the attorneys speak) because research proves that it dramatically increases retention. Additionally, we had a trial in London last year. The British civil courts have implemented LiveNote (a streaming court reporter software) during all trials so that the judge sees streaming text as the witnesses talk. The reason–it drastically increases comprehension. Hope that helps.
Very nice job. I just finished using the beta version in the Gospels class and I enjoyed the experience. I have two observations. I like my fellow classmate like value the scrolling text. I read and watch at the same time to help me retain the material. It forces me to focus my attention better. I would like an option to have a larger view of the slides. The Gospels class uses anywhere between 40 to 60 slides per class. I take notes from those slides so when the overlay is only on for a second, I loose the continuity of note taking. The small slide on the bottom is just too difficult to read when there are heavy notes. Ideally, it would be nice if we could have a slide out section that can be triggered by a small control. When the control is active, the slide out section opens to the right of the video with a larger section for the slides. This would then provide the option to have the smaller slide on the bottom, the overlay slide, or a slide out section.
@Jason, thanks for your comments. Under the "Options" panel in the upper right there is an option for a 3 line transcript. I’ve now made that the default option, so hit the player again and let me know what you think. Are 4 lines enough to help retention?
@John, try it again with the scrolling text and let me know what you think? I also adjusted how long the slides show on top of the video, so let me know if that helps. I’ll look into some additional options for how to show the slides, including your suggestion of some kind of side view. Thanks!
Hi, John,
I really like the ST 104 BETA lesson I viewed: larger screen, scrolling not distracting, good stuff. What I want to do is create a position for myself as editor of the transcripts, rolling or otherwise. I think it’s probably really funny to some non-English-speaking students to see some of the words that come across these transcripts. At this level of education, there should not be misused words and typos and stuff. Just looks bad.
Thanks very much for the new format. Unfortunately, this was my last class online as I am now just about done with MAMC. Wish I had noticed the BETA button sooner! I’m serious about proofreading the transcripts. I have made the comment on each course’s evaluation with four courses, I think. Happy Computing to you!
John:
I too like the multi-line scrolling text. That’s probably what I use the most to make sure I’m understanding the lectures, to verify spellings (typos don’t help), and to review a critical point. Occasionally, I get bogged down in note-taking and want to repeat some lines to confirm what I thought I heard.
However, I noticed that some of the words are truncated at the right margin.
Also, the current text is reverse type—that is, light on dark rather than vice versa. Advertising research shows unambiguously that light on dark is harder to read. In print advertising, this practice consistently reduces readership.
Additionally, the text is superimposed on the background, called surprinting, which can add to visual confusion, especially when one is attempting to read the bottom of a slide.
I do like the larger font size that makes the text more readable.
Thanks for all your work on our behalf.
Marjorie Cooper
@Carol, I’ll pass your comments along to the transcript editors. Thanks for that. Good luck finishing up the MAMC!
@Marjorie, thanks for your feedback. Do you have a link for the advertising research on reverse type and subprinting? The reason I ask is that I assume what you’ve mentioned is true for print media, but when I’ve looked at videos – say, a foreign film DVD – they are always subtitled with reverse type on top of the video (or underneath if it’s letterboxed). I wonder if there is good research on the differences in print vs. video, or if the research is consistent and all DVD manufacturers just do it wrong! Thanks again for mentioning this.
Most of the work done on layout is practitioner stuff rather than academic. The issue with reverse type is so well-known that it is just generally assumed, as for example in this article: B to B; 11/14/2005, Vol. 90 Issue 14, p42-42. Here’s another: Agri Marketing; May98, Vol. 36 Issue 5, p71. But here’s an article where there are experts on both sides (which surprises me): Advertising Age’s Business Marketing; Nov99, Vol. 84 Issue 11, p54.
Advertising giant David Ogilvy, in his book Ogilvy on Advertising advises against reverse type but acknowledges that nothing in advertising is a hard and fast rule.
Here’s an article advising against the use of overprinting (surprinting): B to B, 11/10/2003, Vol. 88 Issue 12, p34-34. And another: Advertising Age’s Business Marketing, Dec98, Vol. 83 Issue 12, p34.
Here’s an article on both: Folio: The Magazine for Magazine Management; 2/1/99, Vol. 28 Issue 2, p54.
I couldn’t find any research that address video versus print, but if I do, I’ll forward the citation to you.
Marjorie