Part 2: Displaying Videos in Jupyter Notebook

Presenting videos in Jupyter Notebook cells

Created on: Oct 31, 2023

Last updated on: May 15, 2024

Part 1: Displaying Images in Jupyter Notebook

In the previous article, the topic of displaying images in Jupyter Notebook was covered. This article intends to continue laying out the ways to run videos right in the Jupyter Notebook cells. This would ease any showing of works that include video data

Content

• Add Videos to Markdown Cells

• Add Videos to Python Cells

---

Add Videos to Markdown Cells

Display the Videos with HTML Syntax

Adding videos to markdown cells can be done with the HTML <video> tag.

<video src="video path">

The video path can either be

• a video URL

• a local video path (absolute/relative)

Below are the examples of each variant.

**Video URL**

<video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">

**Local Relative Path**

<video src="metadata/video.mp4">

**Local Absolute Path**

<video src="/mypath/to/metadata/video.mp4">

Check out the code in Jupyter Notebook

There are optional parameters that can be passed to the <video> tag. The non-exhausted list below lays out the attributes that come in handy and are of frequent use. In particular, when it comes to adjusting the size of the video, changing either one (width/height) keeps the aspect ratio of the video.

- width
    - Example: `width="200"`
- height
    - Example: `height="200"`
- autoPlay
    - To play automatically: `autoplay="true"`
    - To not play automatically: `autoplay="false"`
- controls
    - To include controls: `controls`
    - To not include controls: exclude the controls parameter
- muted
    - Muted since the beginning, but can toggle by user
    - To mute sounds: `muted`
    - To not mute sounds: exclude the parameter `muted`
- loop
    - To run the video automatically in repetitive: `loop`
    - To not run the video automatically: exclude the parameter `loop` 

Examples are shown below:

**Relative Video Path**

<video src="metadata/video.mp4" autoPlay width="500" controls loop>

Check out the code in Jupyter Notebook

For a more thorough description of the optional parameters, consider checking this source.

Add Videos to Python Cells

Mediapy libraries

While displaying images in Jupyter Notebooks can be performed in various manners, showing videos has more limited options. Mediapy library from Google comes into handy to play videos right from the Jupyter Notebook cells (without opening another browser tab).

Install the library with pip:

pip install mediapy

Import the library with:

import mediapy as media

To play a video, the video has to be read in either from the source of the URL or the local path with the function read_videoand subsequently played with the function show_video.

**Video URL**

video = media.read_video('https://github.com/hhoppe/data/raw/main/video.mp4')

**Local Relative Path**

<video src="metadata/video.mp4">

**Local Absolute Path**

<video src="mypath/to/metadata/video.mp4">

Example: Display the Videos from the URL

video = media.read_video('https://github.com/hhoppe/data/raw/main/video.mp4')
media.show_video(video)

Check out the code in Jupyter Notebook

Example: Display the Videos from the Local Path

# Relative Local Path
video = media.read_video('metadata/video.mp4')
media.show_video(video)

Check out the code in Jupyter Notebook

Likewise, there are optional parameters that can be passed to the show_video function. The frame-per-second parameter (fps) is especially useful to control the playing speed of the video.

- width
    - Example: `width="200"`
- height
    - Example: `height="200"`
- fps
    - Example: `fps=15`
- title
    - Example: `title="Hello World"`

[Advanced] Display Multiple Videos in a Row

To display more than one video in the same row, pass in the multiple read-in videos in a list to the show_videos function.

Photo by the author

videos = [media.read_video('metadata/video.mp4'), media.read_video('metadata/video.mp4')]

media.show_videos(videos)

Check out the code in Jupyter Notebook

Check the documentation on show_video and show_videos for more information.

• show_video

• show_videos

Thanks for reading.

---

Codenamewei’s Technical Post

Cover topics of machine learning applications. Subscribe to get the latest posts.