[Using Sakai] video embedding options for Lessons

[Marshall Feldman]

On 9/17/13 3:37 PM,

Charles Hedrick <hedrick at rutgers.edu>

wrote:
> Date: Tue, 17 Sep 2013 15:37:14 -0400
> From: Charles Hedrick <hedrick at rutgers.edu>
> Subject: [Using Sakai] video embedding options for Lessons
> To: Sakai-Mailinglist Sakai Project
> 	<sakai-user at collab.sakaiproject.org>
> Message-ID: <D25943D2-3D56-41CA-B8A5-020E17FBC7B1 at rutgers.edu>
> Content-Type: text/plain; charset=us-ascii
>
> Lessons has a feature to embed videos and other content, "add multimedia". It currently supports only actual video files (.e.g MP4), Youtube URLs, and a random catchall for other URLs. For the rest you have to do "add text", go into "source" and add your own HTML.
>
> I find that there are 4 different techniques that are commonly used. I'm thinking of simply providing a radio button to select one:
>
> * video file - this is a file that you upload, e.g. an MP4 file or a Flash video. It can also be the URL of a file like this
> * video sharing site such as Youtube or Vimeo. This is a URL to a video on one of those sites. It will start with http: or https:
> * embed code. Some video sharing sites give you a "embed code." This usually starts with <OBJECT> or <IFRAME>
> * iframe. Currently if I can't figure out what else to do with a URL I put it in an iframe. That lets the web site figure it out. This can also be used to embed news stories, etc.
>
> Currently "add multimedia" supports only the first and last options. Those will stay unchanged
> * I propose to use oembed, https://github.com/starfishmod/jquery-oembed-all, to handle video sharing URLs
> * I propose to add an option for embed code. It will take raw HTML, pass it through filtering based on the level of HTML filtering you have set, and put it in the page
>
> I don't much like presenting users with those alternatives, but I also can't think of a way to avoid it.
>
> Any other thoughts?
I'm very glad to see someone tackling this, particularly I just put up a 
bunch of screencasts for one of my classes and had all sorts of issues. 
I suggest you look at this from the standpoint of both end-users 
(students) viewing the videos and professors preparing them.

Students are likely to view with a variety of browsers and levels of 
expertise. So, for example, MP4's won't currently play in Firefox on 
Macs. Current HTML5 practice is to include a series of formats, 
eventually including the HTML code for non-HTML5 browsers (cf. e.g., 
http://www.w3schools.com/html/html5_video.asp). So it's imperative to 
keep this all hidden from the students and make it "just work" without 
the student having to install other browsers or plugins.

 From the standpoint of the faculty member preparing this, chances are 
they'll have their material in one format and not want to learn about 
alternative formats, writing HTML5 code in text pages, etc., much less 
rendering the videos in a bunch of different formats to be compatible 
with a reasonable range of browsers. In my case, I started out with .mov 
files, and then found they didn't play nice with Lessons. I then tried 
MP4 and discovered Firefox's difficulties on Macs. I then tried ogg and 
had other problems. Finally, I wound up with WebM, which works well on 
Firefox, which is our locally recommended format. Perhaps needless to 
say, the time to render all these format conversions was extensive for 
three hours worth of screencasts., so I spent over two entire days 
trying to integrate the screencasts with lessons.

So I'd like to see Sakai in general, and Lessons in particular, take as 
input any one of several video formats (codecs and containers, see 
https://en.wikipedia.org/wiki/Comparison_of_video_codecs, 
https://en.wikipedia.org/wiki/Comparison_of_container_formats, and 
https://en.wikipedia.org/wiki/Mpeg), automatically convert them into 
formats that cover a reasonable cross-section of current browser 
technologies, and present them to students without the student having to 
switch browsers or install plugins and without the faculty member having 
to do any conversions or uploading of more than one file per video.

This only addresses your first option. But it would be very simple to 
have a common front end with upload, link, and embed options. Since the 
iframe option seems you be internal to the way the software processes 
the options, it need not be presented as an option to the user. But the 
user should get some kind of explanation (with documentation!) of why 
their material is being rendered in an iframe and what things could be 
done to get one of the other formats.

Finally, I'll add that I'm not a big fan of Lessons' approach of putting 
every different kind of content into a separate part of the individual 
Lessons page. If you look at the links I referenced above, you'll see I 
didn't break them out a separate lines or sections of this document. 
Most human languages don't work that way, and ever since the Web evolved 
by replacing the World Wide Web with HTML, we've been viewing 
human-friendly documents with multimedia content integrated tightly with 
text. In many ways, I think Lessons' approach of separating text blocks 
from multimedia blocks from quiz blocks, etc. is retrograde, much the 
same a 8.3 names were for the convenience of the programmer rather than 
the end user.

So whatever you come up with, please allow it to integrate into a Lesson 
page in at least two different ways. In addition to having something 
like a section of the page for each kind of content ("Add Text," "Add 
Multimedia," "Add Resource," etc.), also allow the course designer to 
write a tightly integrated page with all the appropriate links in a 
single stream resembling conventional English (and other languages) 
usage. For example, an instructor should be able to easily construct a 
Lessons page with the following tightly integrated text & multimedia:  
"Read the article by Hanna Arendt <linked to Resource> and take the 
formative assessment <link to quiz> to ensure you understand both what 
she says and the context in which Eichmann's trial took place. Then view 
this short video about Eichmann's trial <link or embed multimedia> and 
finish this exercise by doing this week's assignment <link to quiz or 
assignment>."