How to create a screensaver using videos in Cinnamon 2.6

jijames
   9 years ago
  0

Cinnamon 2.6 now supports more than just screen locking, where 'real' screensavers can now be used / created.

This tutorial will show you how to make a webkit screensaver that plays a full-screen video when the computer is locked.

To create a webkit screensaver, we need to save the screensaver to '/usr/share/cinnamon-screensaver/screensavers/'

On my system the only installed webkit screensaver is "webkit-stars".

  • Copy the webkit-stars folder, and give the copy a unique name (will require root)
    • I am naming mine 'webkit-iss@cinnamon.org' since I will use a video from the ISS
  • Inside your screensaver folder, edit 'metadata.json' (will require root)
    • Set the uuid to the same name as the folder you created
    • For "name" set the name you would like to give your screensaver - make it memorable
    • For "description" give it a basic description - useful if it will be shared
    • Save "metadata.json"
  •  In the same directory, edit 'index.html' (will require root)
    • Remove all of the code from index.html
    • Copy the code below into index.html
<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body bgcolor="black" style="overflow: hidden">
<video width="100%" height="100%" autoplay loop>
  <source src="/mnt/storage/Videos/ISS.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
  </body>
</html>
<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body bgcolor="black" style="overflow: hidden">
<video width="100%" height="100%" autoplay loop>
  <source src="/mnt/storage/Videos/ISS.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
  </body>
</html>
<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body bgcolor="black" style="overflow: hidden">
<video width="100%" height="100%" autoplay loop>
  <source src="/mnt/storage/Videos/ISS.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
  </body>
</html>
  • In this example I am referring to a video named "ISS.mp4" that is located at /mnt/storage/Videos/. Make sure you change this to the video you would like to show when the computer is locked.
  • Brief overview of code:
    • bgcolor="black"  <-- the background color will be black. If not set, you will probably get a white border around the video
    • style="overflow: hidden"  <-- removes the scrollbar
    • video width / height = 100%  <-- video plays full-screen
    • video autoplay <-- start the video automatically
    • video loop  <-- loop the video

For more information, please see the HTML5 video tag documentation (also for supported video formats).

There is a lot more you could do with this, but this example will give you a full-screen screensaver of any video in your library.