Cannot playback video clip in Jupyter within VSCode

[Scoodood]

The following code is not working in Jupyter within VSCode
My standalone Jupyter Notebook works just fine.

Environment data

• VS Code version: 1.60.2 (Universal)
• Jupyter Extension version (available under the Extensions sidebar): v2021.8.2041215044
• Python Extension version (available under the Extensions sidebar): v2021.9.1246542782
• macOS: Catalina v10.15.7
• Python and/or Anaconda version: Python v3.9.6 / Anaconda v2021.05
• Type of virtual environment used: conda
• Jupyter server running: Local

Expected behaviour

This is on my standalone Jupyter Notebook

Actual behaviour

Video Not playable

Steps to reproduce:

# https://colab.research.google.com/github/jckantor/CBE30338/blob/master/docs/A.03-Animation-in-Jupyter-Notebooks.ipynb#scrollTo=vYkQNvWr_BfE

%matplotlib inline

import numpy as np
import matplotlib.pyplot as plt
import seaborn as sns
sns.set_style('darkgrid')

from matplotlib import animation
from IPython.display import HTML


# create a figure and axes
fig = plt.figure(figsize=(12, 5))
ax1 = plt.subplot(1, 2, 1)
ax2 = plt.subplot(1, 2, 2)

# set up the subplots as needed
ax1.set_xlim((0, 2))
ax1.set_ylim((-2, 2))
ax1.set_xlabel('Time')
ax1.set_ylabel('Magnitude')

ax2.set_xlim((-2, 2))
ax2.set_ylim((-2, 2))
ax2.set_xlabel('X')
ax2.set_ylabel('Y')
ax2.set_title('Phase Plane')

# create objects that will change in the animation. These are
# initially empty, and will be given new values for each frame
# in the animation.
txt_title = ax1.set_title('')
line1, = ax1.plot([], [], 'b', lw=2)     # ax.plot returns a list of 2D line objects
line2, = ax1.plot([], [], 'r', lw=2)
pt1, = ax2.plot([], [], 'g.', ms=20)
line3, = ax2.plot([], [], 'y', lw=2)
ax1.legend(['sin', 'cos']);

plt.close()

def drawframe(n):
    x = np.linspace(0, 2, 1000)
    y1 = np.sin(2 * np.pi * (x - 0.01 * n))
    y2 = np.cos(2 * np.pi * (x - 0.01 * n))
    line1.set_data(x, y1)
    line2.set_data(x, y2)
    line3.set_data(y1[0:50], y2[0:50])
    pt1.set_data(y1[0], y2[0])
    txt_title.set_text('Frame = {0:4d}'.format(n))
    return (line1, line2)


# blit=True re-draws only the parts that have changed.
anim = animation.FuncAnimation(
    fig, drawframe, frames=100, interval=20, blit=True)


HTML(anim.to_html5_video())

Logs

Output for Jupyter in the Output panel (View→Output, change the drop-down the upper-right of the Output panel to Jupyter)

Info 2021-09-29 13:05:59: Execute Cells request 1 11
Info 2021-09-29 13:05:59: Execute Cell 11 file:///Users/xxx/Desktop/test.ipynb
Info 2021-09-29 13:05:59: Notebook Session status file:///Users/xxx/Desktop/test.ipynb # Busy
Info 2021-09-29 13:06:17: Notebook Session status file:///Users/xxx/Desktop/test.ipynb # Idle

[rchiodo]

Thanks for the bug.

Video output isn't supported in VS code because it doesn't ship with video codecs (see this issue here: #1012 and this issue on VS code microsoft/vscode#118275)

However you might be able to render an animation using plotly instead. See this issue here:
#4364 (comment)

[Scoodood]

Thanks

[sugoidesune]

First time using vscode for jupyter notebooks and immediately stumble on something it can't do. 😅