How can I play a local video in my IPython notebook?

Html5 VideoIpythonIpython Notebook

Html5 Video Problem Overview


I've got a local video file (an .avi, but could be converted) that I would like to show a client (ie it is private and can't be published to the web), but I can't figure out how to play it in IPython notebook.

After a little Googling it seems that maybe the HTML5 video tag is the way to go, but I don't know any html and can't get it to play.

Any thoughts on how I can embed this?

Html5 Video Solutions


Solution 1 - Html5 Video

(updated 2019, removed unnecessarily costly method)

Just do:

from IPython.display import Video

Video("test.mp4")

If you get an error No video with supported format or MIME type found, just pass embed=True to the function: Video("test.mp4", embed=True).

Or if you want to use the HTML element:

from IPython.display import HTML

HTML("""
    <video alt="test" controls>
        <source src="test.mp4" type="video/mp4">
    </video>
""")

Solution 2 - Html5 Video

Play it as an HTML5 video :]

from IPython.display import HTML

HTML("""
<video width="320" height="240" controls>
  <source src="path/to/your.mp4" type="video/mp4">
</video>
""")

UPDATE

Additionally, use a magic cell:

%%HTML
<video width="320" height="240" controls>
  <source src="path/to/your.mp4" type="video/mp4">
</video>

and the same applies for audio too

%%HTML
<audio controls>
  <source src="AUDIO-FILE.mp3">
</audio>

enter image description here

Solution 3 - Html5 Video

Use a markdown cell:

<video controls src="path/to/video.mp4" />

Citation: Jupyter Notebook » Docs » Examples » Markdown Cells

Solution 4 - Html5 Video

An easier way:

from IPython.display import Video
Video("OUT.mp4")

Solution 5 - Html5 Video

@Atcold's comment saved me today ;) so I'm posting this as an answer with more detail.

I had a cell with video capture command like this:

!sudo ffmpeg -t 5 -s 320x240 -i /dev/video0 /home/jovyan/capture.mp4

captured file was saved in a location out of git repository to manage disk usage.

for jupyter notebook, a file needs to be on the same directory as the .ipynb file.

# run this before calling Video()
! ln -sf "/home/jovyan/capture.mp4" ./capture.mp4
from IPython.display import Video

Video("capture.mp4")

voila! Thank you everyone for the wonderful answers and comments.

Solution 6 - Html5 Video

Look at this link, you'll find more https://gist.github.com/christopherlovell/e3e70880c0b0ad666e7b5fe311320a62

from IPython.display import HTML

from IPython.display import HTML

HTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/S_f2qV2_U00?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>')

Solution 7 - Html5 Video

from IPython.display import HTML

# Youtube
HTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/S_f2qV2_U00?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>')

Solution 8 - Html5 Video

Up to my knowledge, Ubuntu systems have some issues supporting direct rendering of video files such as .mp4. You will need to do some encoding/decoding with jupyter notebook. Example:

mp4 = open(path,'rb').read()
data_url = "data:video/mp4;base64," + b64encode(mp4).decode()

This snippet can solve this issue.

from IPython.display import display, HTML from base64 import b64encode

def display_video(path):  
    mp4 = open(path,'rb').read()   
    data_url = "data:video/mp4;base64," + b64encode(mp4).decode()
    display(
      HTML(
      """
          <video width=400 controls>
                <source src="%s" type="video/mp4">
          </video>
      """ % data_url
           )   
    )

the snipet was obtained from (https://github.com/facebookresearch/AugLy/blob/main/examples/AugLy_video.ipynb) but it is used quite often in other repositories

Solution 9 - Html5 Video

You could also try this:

from ipywidgets import Video
Video.from_file("./play_video_test.mp4", width=320, height=320)

Solution 10 - Html5 Video

It appears a common issue is not including the video in the same directory as the calling notebook. Given an MP4 'generating_bootstrap_replicates.mp4' in the same directory as the notebook, the following function will load a video in an HTML player at full cell width while also asserting the video is in fact available locally. Works in Jupyter Notebook and Jupyter Lab. Tested with Python v3.8 kernel.

#!/usr/bin/env python3


def video_player(video, mtype="video/mp4"):
    """ Displays mp4 video in Jupyter cell. Jupyter requires video 
    in the same directory as the calling notebook. An assertion error
    will be thrown if this is not true.
    
    Parameters
    ----------
    video (str): the filename of the video. Example: "generating_bootstrap_replicates.mp4"
    mtype (str): the mime type of the video. Example: "video/mp4"
    
    """
    
    from pathlib import Path
    from IPython.display import HTML, display
    
    cwd = Path.cwd()
    
    assert video in [file.name for file in list(cwd.glob('*'))], \
        f'{video} must be in local directory: {cwd}' 
        
    call = """
    <video width=100% controls>
        <source src="{}" type="{}">
    </video>""".format(video, mtype)
    
    display(HTML(call))
    

video_player('generating_bootstrap_replicates.mp4')

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionChrisView Question on Stackoverflow
Solution 1 - Html5 VideoViktor KerkezView Answer on Stackoverflow
Solution 2 - Html5 VideoAziz AltoView Answer on Stackoverflow
Solution 3 - Html5 VideoKent HorvathView Answer on Stackoverflow
Solution 4 - Html5 VideoZiyad MoraishedView Answer on Stackoverflow
Solution 5 - Html5 VideotaiyodayoView Answer on Stackoverflow
Solution 6 - Html5 Videouser5949499View Answer on Stackoverflow
Solution 7 - Html5 VideoJohnnyView Answer on Stackoverflow
Solution 8 - Html5 VideoKonstantinos RoditakisView Answer on Stackoverflow
Solution 9 - Html5 Videouser16310106View Answer on Stackoverflow
Solution 10 - Html5 VideoLiquidgeniusView Answer on Stackoverflow