Блог

Главная - Вопросы по программированию - Как преобразовать анимацию matplotlib в тег HTML5

Как преобразовать анимацию matplotlib в тег HTML5

#python #html #matplotlib

#python #HTML #matplotlib

Вопрос:

Ниже приведен код графика анимации matplolib и здесь показано, как его сохранить. 

 from IPython.display import HTML
import matplotlib.pyplot as plt
import matplotlib.animation 
import numpy as np

t = np.linspace(0,2*np.pi)
x = np.sin(t)

fig, ax = plt.subplots()
ax.axis([0,2*np.pi,-1,1])
l, = ax.plot([],[])

def animate(i):
    l.set_data(t[:i], x[:i]);

ani = matplotlib.animation.FuncAnimation(fig, animate, frames=len(t));
#HTML(ani.to_jshtml())

ani.to_html5_video()

Что я в основном делаю, так это копирую сгенерированный код в базовый HTML-скрипт, подобный этому:

 <html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<video width="432" height="288" controls autoplay loop> BLABLA </video>
</body>
</html>

График не отображается, но заголовок и меню видео есть. Почему? Как я могу это исправить?

Комментарии:

1. Я думаю, что в этом вопросе не хватает очень важного шага о том, как ani.to_html5_video() связано с BLABLA . Возможно, вы просто допустили ошибку, копируя одно в другое?

2. Эй, ссылка, которую я получаю, очень длинная, поэтому я не хотел копировать и вставлять все это, и я не нашел способа прикрепить файл. Вот ссылка на него на моем диске: drive.google.com/file/d/1bGpBR5zoHFD_MCzZLuIaUWT3H0OVeHeO /…

Ответ №1:

Простое указание ani.to_html5_video() не даст вам правильную строку. Если вы внимательно посмотрите на то, что вы скопировали, вы увидите разрывы строк ( n ) по всему выходному файлу. (Я отметил их на скриншоте …)

введите описание изображения здесь

Используйте 

 print(ani.to_html5_video())

чтобы получить HTML-код видео. Или для прямого сохранения в файл

 with open("myvideo.html", "w") as f:
    print(ani.to_html5_video(), file=f)

Объяснение

В качестве поясняющего примера возьмем

 string = "HellonWorld"

Если вы укажете string в ячейке, это приведет к 

 'HellonWorld'

Но если вы print(string) , это выдаст вам интерпретируемую строку

 Hello
World

введите описание изображения здесь

Ответ №2:

Размер to_html5 функции по умолчанию embed_limit равен 20 МБ.

 If the embed_limit is exceeded, this returns the string "Video too large to embed."

Я предполагаю, что ваша анимация превышает этот предел. Поскольку вы определяете <video> тег в HTML, заголовок и элементы управления, тем не менее, генерируются.

Вы могли бы взглянуть на сгенерированный документ, чтобы увидеть, написано ли в теле видео просто «Видео слишком большое для встраивания». Если это так, вы можете попробовать увеличить embed_limit .