Media Previews is dead, long live Media Viewers

Posted on by

A while ago I wrote about the newly-extensible Document Preview component in Alfresco Share and how you can use it to customize the out-of-the-box viewers and add your own custom implementations.
I mentioned at the end of that post that there were some new examples of custom viewers coming in Share Extras and I’m excited that we’re now ready to release them on the site.
Peter Löfgren had the great idea of using the pdf.js project to perform direct rendering of document content in the web browser using HTML5. I’d already started work on some simpler examples of custom viewers, and on refining the Flash audio/video players that Share Extras previously provided for Alfresco 3.3/3.4.
The result is what we’re calling the Media Viewers add-on. This bundles up a total of six viewer implementations designed to show different ways of implementing custom document views, both with and without Flash.

  • PdfJs displays documents, presentations and any other file capable of being transformed to PDF in-line in the web browser using the excellent pdf.js viewer, which uses the power of HTML5 to remove Share’s Flash dependency for document viewing.
    The viewer supports a number of features not directly supported by the Flash document previewer, such as a sidebar with thumbnail, outline and search views, bookmarking of individual pages of a document, and will remember the page number and zoom level of previous documents that you have viewed.
    PdfJs Viewer
  • FLVPlayer and MP3Player display compatible audio and video files respectively, within the web-browser using the open source FLV Player and MP3 Player media players by neolao. Based on the content’s MIME type, the updated component automatically chooses the appropriate previewer to use.
    While similar to the Flash players provided by Share out-of-the-box, these implementations allow advanced customization of the player via configuration and if FFmpeg is installed, will fire up a transformation to allow viewing of non-H264/FLV video and non-MP3 audio. The user is informed when conversion is in progress and the screen automatically updates when the content can be viewed.
  • Embed uses an in-line iFrame to embed the content itself directly inside the web page. It is suitable for use with content types that can be viewed directly within the web browser such as plain text and PDF, with the Chrome or Acrobat plugins installed. Again, this can be used to avoid the use of the Flash previewer for some clients.
  • Prettify allows formatted code, mark-up and other supported text formats to be displayed in directly in the document and uses the google-code-prettify project to provide an in-line browser-based view with syntax highlighting.
    Prettify Viewer
  • WebODF is an EXPERIMENTAL viewer which uses the AGPL-licensed WebODF project to display ODF content directly in the web browser.
    WebODF cannot be distributed with the add-in itself, so in order to use it you must also download the latest JAR file from the supporting share-webodf project and install it in the same way as the main media-viewers JAR file.

What’s most exciting is that we’re building on top of some great projects such as google-code-prettify, WebODF and pdf.js, that are evolving at a fast pace and changing the way that documents are viewed in a browser environment.
There is plenty more information including download links on the main Media Viewers project page on Share Extras. Please try it out, let us know what you think and help us to improve this collection.

18 thoughts on “Media Previews is dead, long live Media Viewers”

  1. That’s more than cool!!!
    Don’t like the existing Flash Previewer.
    Searching right in the preview is a big advantage. Hope hightlighting is doable.
    Thanks for this add-on!

  4. @Victor: (1) Check out the latest pdf.js and build, (2) Check out the source of the add-on, (3) update the JS files under source/web/extras/components/preview/pdfjs with the updated versions from your pdf.js build, then (4) build the add-on from your source.
    The version of pdf.js in the add-on is a few weeks old but no more. What are your reasons for needing the latest changes?

  5. Pingback: Media Viewers - extending Alfresco viewer capability | Loftux AB

  6. Pingback: Media Viewers - exempel på hur det ser ut | Loftux AB

  7. I have problem with mp3 file. When I opened with share, will appear:
    we are unable to connect to the content you’ve requested.

      • i have same problem my company need read only permission. i can config on alfresco but viewer show download button. can i disable download button media viewer. sorry for my english skill. thank you

  9. I am using Media Viewer 2.5.1 with Alfresco 4.2.b.
    The document loads correctly in IE 7.0/8.0/9.0 but when I click on the download link in Share the document disappears from the viewer. The document displays when the page is refreshed.
    It works fine on other browsers. Any suggestions? Thanks.

  10. When I used Media Viewers 2.5.1 on Windows Server 2012, I tried to view text and excel files which contained Japanese characters.
    Japanese characters on the files were corrupted and cannot be read.
    Are there ways to solve this problem?
    Atsushi Matsuura

Comments are closed.