skip to navigation
skip to content

Jupyter-Video-Widget 0.3.0

A Jupyter HTML5 Video Player Widget

# Jupyter Video Widget

The goal of this project is to develop a custom Jupyter [widget]( making it easy to play videos (local and remote) via HTML5 video player embededed in a Jupyter Notebook. This widget project was initialized using the very handy Cookiecutter [template](

# Example


# Install

## Prerequisites

If not already enabled, you'll need to enable the ipywidgets notebook extension that installs with Jupyter. You can use the command `jupyter nbextension list` to see which (if any) notebook extensions are currently enabled. Enable it with following:

jupyter nbextension enable --py --sys-prefix widgetsnbextension

## Standard Installation

Use pip to install:

pip install Jupyter-Video-Widget

jupyter nbextension enable --py --sys-prefix jpy_video

## Developer Installation

git clone

cd Jupyter_Video_Widget

pip install -e .
jupyter nbextension install --py --symlink --sys-prefix jpy_video
jupyter nbextension enable --py --sys-prefix jpy_video

# Making Changes to JavaScript Code

Jupyter widget development uses [npm]([npm]( (Node Package Manager) for handling all the scary JavaScript details. The source code for this project lives in the folder `js` and the npm package is defined by the file `js/package.json`. The actual JavaScript source code for the video widget is contained entirely in the file `js/src/jupyter-video.js`. This is the only JavaScript file you should need edit when working on front-end parts of this project.

After making changes to this JavaScript code it must be prepared and packaged into the `static` folder on the Python side of the project. Do this by typing the following command from within the `js` folder:

npm install

See the links below for more helpful information:

# File Layout

Note: I found this write-up at very helpful in understanding the recommended folder layout:

- Jupyter_Video_Widget/
- jpy_video/ All Python code lives here
- static/ Prepared and packaged JS code ends up here
- Widget Python code
- Includes http file server with support for byte range requests
- js/ All original JavaScript code lives here
- dist/
- node_modules/
- src/
- jupyter-video.js Widget javaScript code
- embed.js Only edit to update exported module name (e.g. video.js)
- index.js Only edit to update exported module name (e.g. video.js)
- extension.js
- package.json Double check author name, email address, github org., etc.
- webpack.config.js Contains path to static JS folder on the Python side
- setup.cfg
- Contains relative path to static folder under jpy_video
- requirements.txt

## Reference Information

- Jupyter widgets documentation:
- [Jupyter widgets github](
- [Building a custom widget](
- [Low-level widget tutorial](

- Helpful HTML5 articles:
- [Good stuff about implementing custom video HTML5 player](
- [Video player styling](
- [Media buffering and seeking, nice example displaying time ranges where video is loaded](
- [HTML5 media events](

- More information about HTML5 and video/audio media:

File Type Py Version Uploaded on Size
Jupyter_Video_Widget-0.3.0-py2.py3-none-any.whl (md5) Python Wheel py2.py3 2017-10-07 96KB
Jupyter_Video_Widget-0.3.0.tar.gz (md5) Source 2017-10-07 51KB