Jupyter HTML Video playback speed

user_2089899 0
Viewed 596

I know I can display a video in a Jupyter notebook like this:

from IPython.display import HTML

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

But does there exist a way to control the playback speed? For example playing a video at half speed.

jupyter playback video html python
1 Answers

In Jupyter Notebook when you right click on video then you should see context menu and there you can change speed.

Jupyter Lab doesn't have speed in this menu.

If you want to set speed at start then you have to use playbackRate in JavaScript

from IPython.display import HTML

HTML("""
<video alt="test" controls id="theVideo">
  <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4">
</video>

<script>
video = document.getElementById("theVideo")
video.playbackRate = 4.0;
</script>
""")

The same way you can also create buttons to control speed.

from IPython.display import HTML

HTML("""
<button id="speed_4.0">Speed 4.0</button>
<button id="speed_0.5">Speed 0.5</button>

<hr>

<video alt="test" controls id="theVideo">
  <source src="https://archive.org/download/Popeye_forPresident/Popeye_forPresident_512kb.mp4">
</video>
    
<script>
video = document.getElementById("theVideo");
//video.playbackRate = 4.0;

document.getElementById("speed_4.0").addEventListener("click", function(){ 
    video.playbackRate = 4.0;
});

document.getElementById("speed_0.5").addEventListener("click", function(){ 
    video.playbackRate = 0.5;
});
</script>
""")

If you put the same code in next cell then buttons may not works and you may have to use new IDs for buttons and video. IDs should be unique.

Maybe it would need some other code to automatically generate unique IDs in every cell.

In code I put URL to real video Popeye for President so everyone can test it.

user_18320580
Related