1,275
edits
Support/ScreencastsPRD: Difference between revisions
category -> Support Archive
(category -> Support Archive) |
|||
| (17 intermediate revisions by 3 users not shown) | |||
| Line 3: | Line 3: | ||
=Overview= | =Overview= | ||
[[File:Watching_screencast.jpg|200px|right]]Screencasts can be thought of as animated screenshots. A good screencast can serve as the unique user experience that bridges a well written how-to article together with interactive live support. Not everyone is comfortable reading written instructions containing complicated computer and software terms; with screencasts, users can instead choose to watch a video demonstrating exactly how to solve the problem. | |||
Since we are unable to provide live support to every single Firefox user (we have north of 250 million of them these days!), screencasts is a leveraged, community-powered solution that come pretty close to live support while still allowing it to scale to meet the demands of our growing user base. | |||
=Requirements= | =Requirements= | ||
==File types== | ==File types== | ||
* [Required] .swf Flash container OR .flv Flash video | * [Required] .swf Flash container ''OR'' .flv Flash video | ||
**.swf must be supported because of our [http://videos.mozilla.org/screencastcontest large pool of .swf screencasts] from the Screencast Contest | **.swf must be supported because of our [http://videos.mozilla.org/screencastcontest large pool of .swf screencasts] from the Screencast Contest | ||
**.flv must be supported because not all screencast software can export to .swf. Wordpress (Podpress) includes an open source (php) FLV player that we could use to play .flv files. | **.flv must be supported because not all screencast software can export to .swf. Wordpress (Podpress) includes an open source (php) FLV player that we could use to play .flv files. | ||
| Line 28: | Line 30: | ||
==Presentation & website integration== | ==Presentation & website integration== | ||
===Backend=== | ===Backend=== | ||
* If an ogg/theora version of a screencast exists ''and'' the browser supports the | * If an ogg/theora version of a screencast exists ''and'' the browser supports the video tag, the ogg/theora file would be used. Otherwise, it would fall back to an object tag with the .swf file, or the built-in video player with the .flv file. | ||
===Frontend=== | ===Frontend=== | ||
* | * Screencasts can be embedded anywhere in a KB article, including more than one screencast per article | ||
* Typically they will be used above numbered lists of instructions, e.g. [http://support.mozilla.com/en-US/kb/Bookmarks+not+saved#Places_preferences Bookmarks not saved] | |||
**[ | * Since screencasts can be very large in terms of screen space, they should not be embedded upon loading of the article. Instead, only a link/icon should be displayed.<br /><br />[[File:Watch-video.png|500px]]<br /> | ||
* | ** Default text of link should be "Watch a video of these instructions" but it should be possible to override when embedding a screencast. | ||
** | ** Subtle frame around the bar to make it stand out | ||
** Recognizable Play or Movie graphic to the left of the text | |||
** Final design to follow shortly (Tara) | |||
* When clicking on the video link, the whole embedded video player (or Flash .swf object) should be displayed, along with links to switch between the Flash or Ogg version of the video, if both exist.<br /><br />[[File:Screencast_box.png|500px]]<br /> | |||
** [http://www.mozilla.com/en-US/firefox/video/ Embedded Video object on already existing mozilla.com page] -- copy this | |||
** Box should correspond to the size of the video object (with a lower limit to ensure UI doesn't look broken) | |||
** Link at the bottom to switch source from Ogg to swf/flv and vice verca (default should be to load the Ogg file if it exists ''and'' if the browser supports it) | |||
**Make sure the Ogg video is the default format for capable browsers, and embed the Ogg file in the same way as the flash file is embedded (i.e. don't do it like [http://www.mozilla.com/en-US/firefox/video/ they do] with just leaving the page altogether to display the raw .ogg file). | |||
==Uploading & managing screencasts== | ==Uploading & managing screencasts== | ||
| Line 44: | Line 53: | ||
* It should be possible for contributors to upload an .ogg version of an existing screencast that only has a .swf file. | * It should be possible for contributors to upload an .ogg version of an existing screencast that only has a .swf file. | ||
** Need to figure out how the new .ogg file can be inserted to the article(s) that is using the screencast. We need to track which articles use which screencasts in the database so we can identify orphans (as we do with images). | ** Need to figure out how the new .ogg file can be inserted to the article(s) that is using the screencast. We need to track which articles use which screencasts in the database so we can identify orphans (as we do with images). | ||
** Also need to ensure the complementary .ogg file is not malicious and that it's indeed just a converted copy of the .swf file. Maybe we only allow trusted contributors to upload complementing .ogg files of existing screencasts? | ** Also need to ensure the complementary .ogg file is not malicious and that it's indeed just a converted copy of the .swf file. Maybe we only allow trusted contributors to upload complementing .ogg files of existing screencasts? Answer: ogg is no more likely to be malicious than flv. Review to check both files as part of review. | ||
===Frontend=== | ===Frontend=== | ||
[[File:Screencast_upload.png|500px]] | |||
* Use same mechanism as for images -- two simple upload fields in the Edit Article view; one for .swf (required) and one for .ogg (optional). | * Use same mechanism as for images -- two simple upload fields in the Edit Article view; one for .swf (required) and one for .ogg (optional). | ||
** See [https://bugzilla.mozilla.org/show_bug.cgi?id=450548#c13 bug 450548 comment 13] for how this is currently implemented for screenshots | ** See [https://bugzilla.mozilla.org/show_bug.cgi?id=450548#c13 bug 450548 comment 13] for how this is currently implemented for screenshots | ||
* Allow people to provide a url to existing .swf/.ogg files, but always grab that file and store locally | * Allow people to provide a url to existing .swf/.ogg files, but always grab that file and store locally | ||
**'''Question:''' can URL support work in the same text field, or would we need separate fields for URLs? This requirement is not critical, so if it's too complicated to do this, let's drop it. | |||
* Show a progress bar using jQuery when uploading a screencast, since the operation can take quite a while to complete. | |||
==Wiki syntax for embedding screencast== | ==Wiki syntax for embedding screencast== | ||
* Simple tag taking file names and size as parameters - TBD (zzxc) | * Simple tag taking file names and size as parameters - TBD (zzxc) | ||
* Example: {SCREENCAST( | * Example: ''{SCREENCAST(flash=>jing-filename.swf,ogg=>video.ogg,label=>Watch a video of these instructions)}Title of video{SCREENCAST}'', where either swf OR flv is required and ogg is optional.)} (flash type should support either swf or flv) | ||
* '''Question:''' Do the dimensions have to be known by this plugin, or can that info be extracted from the video itself? | |||
** If they have to be known, we need parameters for that too in the plugin. | |||
** What about different sizes for different formats? (E.g. the OGG version has different dimensions compared to the SWF version.) | |||
* The title of the video can also be a parameter if the above syntax isn't possible (it is just an example; I don't know all limitations of TikiWiki plugin syntax!). So, this works too: ''{SCREENCAST(flash=>jing-filename.swf,ogg=>video.ogg,label=>Watch a video of these instructions,title=>Title of video)}{SCREENCAST}'' | |||
=Timeline= | =Timeline= | ||
* PRD finalized | * PRD finalized Q1 2009 | ||
* UI finalized | * UI finalized early Q2 | ||
* Server Backend | * Server Backend / IT stuff done April 2009 | ||
* Implementation finished | * Implementation / frontend stuff finished May 2009 | ||
=Tasks= | |||
* Get server storage up | |||
** video.mozilla.org/sumo? (IT) | |||
** Ensure that SUMO web app can write to this storage folder | |||
* Investigate whether we can just use the open source (php) FLV player used in Podpress to play .flv files. | |||
* Implement frontend for uploading screencast to wiki article, using jQuery for the progress bar. | |||
** Use similar UI as the screenshot uploader, i.e. after uploading show a thumbnail that can be clicked on to insert the code snippet into the editor. | |||
* Implement {SCREENCAST} TikiWiki plugin that can display/embed a screencast in an article. | |||
[[Category:Support Archive]] | |||