Notebook: <video> tag can't be used from markdown cells

Created on 6 Apr 2017  路  7Comments  路  Source: jupyter/notebook

If I add a video element to markdown, then it doesn't display in a live/running notebook:

### Example 2: Flow around a cylinder
---
<video controls>
<source type ="video/mp4" src="cylinderib.mp4"/>
Your browser does not support the video tag
</video>

Of course it works if I do it in a code cell like this:

from IPython.display import HTML
HTML("""
<video controls>
<source type ="video/mp4" src="https://rawgit.com/erdc-cm/proteus/add_fem_dem/notebooks/Presentations/FEMDEM/cylinder.mp4"/>
Your browser does not support the video tag
</video>""")

Most helpful comment

Ok, it looks like Google Caja is sanitizing the <source> element, not the <video> element, so the following works:

<video src="https://archive.org/download/Sita_Sings_the_Blues/Sita_Sings_the_Blues_small.mp4" controls>
Your browser does not support the video tag
</video>

All 7 comments

Video is not supported by the Commonmark spec or the marked library that the notebook uses to render Markdown. However, there is discussion about adding it to Commonmark: https://talk.commonmark.org/t/embedded-audio-and-video/441/40

I knew video is not supported in the markdown spec, but I'm passing in raw html for the video element. I was expecting it to be passed through as it is with other html features that are not yet supported by markdown (like image scaling). It would be nice if a lot of basic features were supported by markdown... That discussion on video has been running for 2 years!

Agreed

Looks like it is a security thing. My javascript console says:

HTML Sanitizer source.src removed Object {change: "removed", tagName: "source", attribName: "src", oldValue: "cylinderib.mp4", newValue: null}

Presumably the cell should be treated as trusted, though.

Ok, it looks like Google Caja is sanitizing the <source> element, not the <video> element, so the following works:

<video src="https://archive.org/download/Sita_Sings_the_Blues/Sita_Sings_the_Blues_small.mp4" controls>
Your browser does not support the video tag
</video>

There is also a Video display class provided by ipython, but for some reason it's not importable. I created an issue to track it: https://github.com/ipython/ipython/issues/10432

image

Thanks a lot. I should have known to check the javascript console. It's definitely nice to have fully functional image and video html elements working from the markdown cells.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mikepqr picture mikepqr  路  3Comments

cancan101 picture cancan101  路  3Comments

fonnesbeck picture fonnesbeck  路  3Comments

jonatanblue picture jonatanblue  路  3Comments

arbaazsama picture arbaazsama  路  3Comments