video play in Jupyter books

[chipbrock]

I'm trying to play a video in Jupyter books and I must be missing something.

This works...but it just plays without controls and without the ability to stop it (unless one clicks and then it opens up with controls)...but it autoplays:

{figure} ../_images/relativity/train_simultaneous.mp4
---
width: 60%
figclass: margin-caption
alt: My figure text
name: train_simultaneous
---
The very weird problem of the famous magnet and coil demo. Think hard about this.

If such functionality is not yet working (I think I saw that elsewhere), I don't understand why raw HTML would not work:

<center>
<video width="500" poster="../_images/relativity/train_cover.png" controls>
<source src="../_images/relativity/train_simultaneous.mp4" type="video/mp4">
</video>
</center>

...just sits there with a frame but no video is loaded. I know this is perfectly fine html as

<center>
<video width="500" poster="./images/energy/videome1.png" controls>
  <source src="https://qstbb.pa.msu.edu/storage/isp220_video_2019/7_energy/7.1-7.3_kinetic_energy_v2_w1-1m.mp4" type="video/mp4">
</video>
</center>

...works fine. The only difference is a local file versus a hosted file.

Ideas? I thought raw HTML would be respected in total?

[choldgraf]

Hmmmm would the video depend on some JavaScript library or something? That's the only thing i can think of...

[chipbrock]

Nope. I don’t think so. It’s a movie made of a few slides of keynote which I turned into mp4 using Handbrake. A standard process. I also tried to do the same thing with a “regular” movie that’s in another part of the product. It was made with a camera. Side by side: <center> <video width="500" poster="../_images/relativity/magnet_coil_2.png" controls> <source src="../_images/relativity/magnet_coil_2.mp4" type="video/mp4"> </video> </center> ```{figure} ../_images/relativity/magnet_coil_2.mp4 --- figclass: margin-caption alt: My figure text name: magnet_coil_2 --- The very weird problem of the famous magnet and coil demo. Think hard about this. ``` The first one does nothing, like my original problem, the second instance plays automatically without controls. Not good. I think this is a bug, no? It should respect the raw html I think. On Jun 25, 2021, at 9:17 PM, Chris Holdgraf ***@***.******@***.***>> wrote: Hmmmm would the video depend on some JavaScript library or something? That's the only thing i can think of... — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<https://urldefense.com/v3/__https://github.com/executablebooks/meta/discussions/410*discussioncomment-923274__;Iw!!HXCxUKc!nJtNIDmt9y9mlYNoaDoiNjG5qF6s9eaVq3GI6BfhFzVbfF3gnWa1vHnrD7e6umo$>, or unsubscribe<https://urldefense.com/v3/__https://github.com/notifications/unsubscribe-auth/ABCOLTO5LFZM6GHMKRCAHTDTUUTCFANCNFSM47IV2MBA__;!!HXCxUKc!nJtNIDmt9y9mlYNoaDoiNjG5qF6s9eaVq3GI6BfhFzVbfF3gnWa1vHnrwgiOIsc$>.

…

--------------------------------------------------------------- Raymond Brock * University Distinguished Professor Department of Physics and Astronomy, Michigan State University Adjunct Professor of Physics Department of Physics, Arizona State University MSU address: 3210 BPS Building Michigan State University * East Lansing, MI 48824 sent from: ***@***.******@***.***> MSU office: (517)353-1693/884-5579 open fax: (517)355-6661 secure fax: (517)351-0688 Vidyo personal room: http://goo.gl/AgiDJ4 CERN Office: 32 2-B03 * 76-71756

[rowanc1]

I am a bit late to answer this, but the problem is likely that the image is not copied. If you put the video in your _static folder, then you can access it locally, this doesn't seem to work on ReadTheDocs though, so I went with something like this:

<figure>
<video src="https://github.com/executablebooks/meta/raw/d30cae55226c762a956c5a33cf9fd6e93557f3f8/docs/_static/videos/jupyterlab-myst-inline.mp4" autoplay muted webkit-playsinline="true" playsinline loop style="max-width:100%"></video>
<figcaption>Inline execution in markdown cells.</figcaption>
</figure>

Tested and works in sphinx 5.0.2, but really not great. :(

(The new mystjs CLI works with videos for both inline ![](my-video.mp4) as well as in figure and image directives. Which is nice.)