Learning Kivy: Video Player and Scatter widgets

Hello everyone!

Today I would like to share with you something new that I learnt recently while working on the Kivy library. It includes a brief introduction about the Widget class in Kivy along with two sample programs that demonstrate complex UX widgets and behaviors widgets respectively.

Widget class is the base class required to create a Widget. We can add, position and clear widgets using the methods provided by the Widget API. In simpler terms, a widget is defined as an element of a graphical user interface.

Kivy includes various widgets such as:

1) Label, Button, CheckBox, Image, Progress Bar etc (called UX widgets)

2) Scatter, Stencil View (called Behaviors widgets)

3) Drop-Down List, FileChooser, Popup, Spinner, TabbedPanel, Video player etc (called Complex UX widgets)

4) Screen Manager widget

5) Grid Layout, Box Layout, Anchor Layout etc (called Layout widgets)

In this post I will talk about the Video Player and Scatter widgets.

Video Player widget:

As defined in the Kivy docs, “a Video Player widget can be used to play video and let the user control the play/pause, volume and seek. The widget cannot be customized much, because of the complex assembly of numerous base widgets”.

Here is a sample program that demonstrates the working of the Video Player widget:

Step 1: I will be using the softboy.avi video included in the Kivy samples for this purpose. You can also download a short video (.avi , .mkv) and use it. In order to display text at a specific time and duration of the video we can use annotations. An annotation file has a .jsa extension. You can find more information on annotations over here.

Step 2: You can open any editor like Notepad++ to write the code. I will be using the Python IDLE for now.

import kivy

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.videoplayer import VideoPlayer
parent= Widget()
button= Button()
class MyApp(App):
    def build(self):
         button = Button(text='Play video', font_size=14)
         parent.add_widget(button) #add button 
         return parent
def on_button_press(self):
        video= VideoPlayer(source='softboy.avi', state='play')
        parent.add_widget(video) #add videoplayer
        return parent
if __name__ == '__main__':

Step 3: Save this script as videoplayerdemo.py

Note: Make sure you have the video file (.avi), annotation file (.jsa) if any and your Python file (.py) in the same folder. Run the application from the command prompt by typing:

kivy videoplayerdemo.py

Click on the button “Play video” to start the video. Double click on the video to increase it’s size.

VideoPlayer widget snapshot 1

VideoPlayer widget snapshot 2

Scatter widget

The Scatter is a very simple widget to understand. It is basically used to build interactive widgets that can be translated, rotated and scaled with two or more fingers on a multitouch system. It acts as a container and is combined with other widgets.

Create a new Python script named scatterdemo.py and write the following code:

import kivy

from kivy.app import App
from kivy.uix.scatter import Scatter
from kivy.uix.image import Image    

class MyApp(App):
    def build(self):
         scatter= Scatter()
         # store kivy.jpg image in same folder as the python script
         image= Image(source='kivy.jpg')
         scatter.add_widget(image) #combine image widget with scatter
         return scatter
if __name__ == '__main__':

Run the application as done before and you will see an image of the Kivy logo. You can try dragging, rotating the image using the mouse.

Drag image

Rotate image

So that completes a quick look at some of the widgets in Kivy. There is still lots to learn and many more things to do! Have a great day! 🙂

Karan Balkar About Karan Balkar
self proclaimed extraterrestrial fandroid, computer engineer, amateur gamer and die hard punk rock fan!

3 thoughts on “Learning Kivy: Video Player and Scatter widgets

  1. This code for videoplayer doesnt work correctly. U have missed the ‘self’ keyword for the on button press method. U r just passing one argument and because of this it shows an error.

Leave a Reply

Your email address will not be published. Required fields are marked *