Creating Screencasts With SVG and HTML5 Canvas Technology


In the e-learning courses that are supporting teaching screencasts quite often appear which are prepared with the use of dedicated tools (e.g.: Wink). The content is exported to the format accepted by the Web browser. Most often this is one of the video formats, e.g. MP4, OGV, WMV or an object based on Flash technology. Of course, the video content is not interactive – the user can only stop or resume playback. In contrast, the Flash format allows to embed interactive elements. Nowadays Flash is virtually inaccessible on mobile devices and this content can be played only on desktop systems (Windows, MacOS X, some Linux distributions). The two solutions: SVG and HTML5 Canvas in order to use the interactive screencast can be now applied, that allow for the displaying of vector and raster graphics, control a time of displaying a graphics and steering of screencast display process. In addition, they support the interaction between the user and the screencast. Their big advantage is that now a Web browser can display the animation without the need of using any plug-ins. However, the editing process of this screencasts should be performed manually using a text editor, which requires knowledge about JavaScript. Currently, there are new tools such as Adobe Animate or Google Web Designer that allow creating animations using these technologies. It is therefore expected that in the near future there will be a dedicated tool for creating screencasts with using of SVG and HTML5 Canvas available.

Direct link to the paper [here]