Embedding local videos works imperfectly

[damiendr]

I have a notebook where I'm generating and then displaying a video file using the following HTML snippet:

<video controls autoplay>
    <source src="movie.mp4" type="video/mp4"/>
</video>

This works to some degree but there seems to be something wrong.

• In Chrome and Opera, the video plays fine, but the timeline remains in "loading" state and it is not possible to jump to any location except back to the start.
• In Safari, the video does not play at all and remains in "loading" state.

The notebook server logs the same thing in all cases:
[I 18:11:02.417 NotebookApp] 302 GET /notebooks/path/to/movie.mp4 (::1) 1.22ms

If I instead use a direct file:/// URL the video works as expected with the ability to jump around.

Embedding images eg. <img src="local_image.png"/> works fine.

A search through the web yields several pages that advise using Base64 data instead of an URL, but it seems like this almost works. Is it a known issue with the way local files are served?

[takluyver]

This might be a symptom of #968 - it probably needs to support some HTTP range requests to enable jumping to specific points in the video.

[Atcold]

I think I may have a related issue (not sure it's the same).
If I open a new tab in Chrome (on an Ubuntu box) and I insert the location of my video, it displays just fine.
The same happens if I execute an HTML file with this content

<video controls>                                                                
    <source                                                                     
        src="/media/[...]/20160706_180451.mp4"
        type="video/mp4">                                                       
</video>

If I paste this into a Jupyter notebook cell, with some %%HTML magic, I end up with this (a blank, unplayable video).

Nevertheless, I can get to display the video if I execute the following code.

video = io.open('/media/[...]/20160706_180451.mp4', 'r+b').read()
encoded = base64.b64encode(video)
HTML(data='''
<video controls>
    <source src="data:video/mp4;base64,{0}" type="video/mp4" />
</video>'''.format(encoded.decode('ascii')))

So, I guess I am having some troubles with the encoding.
Any suggestion would be appreciated.

Oh, just now I noticed this

[W 08:38:58.929 NotebookApp] 404 GET /media/[...]/20160706_180451.mp4 (127.0.0.1) 2.00ms

Using a leading file:// (so that I end up with something like file:///media/[...]) does not work either.

[takluyver]

/media/... in the URL is not the same as a filesystem path /media/..., except perhaps if you run your notebook server in the root directory, which we don't recommend.

I believe that file:// URLs are generally not loaded from http[s]:// pages.

[Atcold]

@takluyver, thank you for getting back to me.
So, how would you go for displaying this video?

[takluyver]

Probably copy or symlink it to the directory where the notebook is (this is the working directory, unless you've changed it), and then use a relative URL.

[Atcold]

@takluyver, haha, I just symlinked it (before reading your answer) and it just did the trick.
Nevertheless, the absolute path was working just fine in the HTML file. So, I'm a tad puzzled now.
Do you think you can explain what's going on?

[takluyver]

If you're loading the HTML page as a file:// URL, then the absolute path will (I assume) be interpreted as another file:// URL, so it works. If you run an HTTP server and access it with an http:// URL, the absolute path will be treated as an http:// URL, and sent to the server to evaluate.

[Atcold]

@takluyver, understood. Thank you. I was not aware of these quirks.

[zachjweiner]

I'm having the same issue as the original post here, and I'm using a relative path to my video. In Chrome only, "the video plays fine, but the timeline remains in "loading" state and it is not possible to jump to any location except back to the start" is exactly what I'm seeing with the magic cell. When I embed and decode manually with IPython.core.display's HTML, I can scroll through the video, but it's really slow. (This is a 200kb movie with 100 frames.) Edge's HTML player allows me to scroll through without any lag. I don't know anything about HTML so I don't understand the above thread; how can I replicate Edge's performance in Chrome (and get the magic cell to work)?

[gnestor]

@zachjweiner What version of notebook are you using? Try jupyter notebook --version.

I have tried the following with a video.mov in the same directory where my notebook server is running and they all work as expected:

# In[1]
from IPython.display import Video
Video('./video.mov')

# In[2]
from IPython.display import HTML
HTML("""
<video width='480' height='480' controls>
    <source src='./video.mov'>
    Your browser does not support the video tag.
</video>
""")

# In[3]
%%html
    <video width='480' height='480' controls>
        <source src='./video.mov'>
        Your browser does not support the video tag.
    </video>

[zachjweiner]

I'm on 5.0.0 (I just set things up a week ago), and all of those methods replicate the behavior described originally. What does work is @Atcold's solution from 2/10,

video = io.open('/media/[...]/20160706_180451.mp4', 'r+b').read()
encoded = base64.b64encode(video)
HTML(data='''
<video controls>
    <source src="data:video/mp4;base64,{0}" type="video/mp4" />
</video>'''.format(encoded.decode('ascii')))

does work.

[gnestor]

Try upgrading notebook to 5.2. It looks like this was resolved with #2656 which was introduced in 5.1.

pip install notebook --upgrade

[zachjweiner]

Thanks, that did it. (Although, I will say that Chrome's video player is much slower to scroll than Edge's, for example. But that's probably a Chrome issue.) Didn't realize anaconda wouldn't necessarily have the most recent version.