Python animations

[mjyb16]

Now that we are heading into the visualization stage of DH, I figured it would be a good time to return to my question about python HTML5 videos. It's been a while since we discussed this (and since I posted anything as an issue), but linked below is the raw html from the animation of a double pendulum that I created last year in physics; please let me know what the best way to publish this video online would be. I am also able to download the video as an mp4, which seems like a better option due to the size of the video.

https://github.com/mjyb16/520-Codes/blob/master/double_pendulum (warning: this is a fairly large file, I don't recommend trying to download it)

[dap167]

I'm not completely certain if this would work, but from a brief glance, it's likely that you can simply place the raw html inside of wherever you want to place it. As you said, however, the size may be a problem. One possible route that may work is to download the video as it's mp4 and have the file hosted on obdurodon. Then, you can reference it with the <video> element using a relative path.

<video width="320" height="240" controls> <source src="double_pendulum.mp4" type="video/mp4"> Your browser does not support the video tag. </video>

[mjyb16]

Good advice, thank you. I will probably use your mp4 method for uploading such simulations onto my personal website once that is set up.

[djbpitt]

@dap167 @mjyb16 If the raw HTML is much larger than the mp4, I would take Danny’s approach.

Note, though, that controls is an attribute and must have a value, so the example above is not valid XHTML5. The reason it doesn’t in that example is that HTML5 supports both XML syntax (which is what we use in our course; this is XHTML5) and non-XML syntax (which allows attribute names without values). We use only the XML-valid version because XML validation reduces the opportunity for us to introduce an error without seeing it. For an explanation and example of how to supply the attribute value in XML-conformant XHTML5 see https://www.w3schools.com/tags/att_video_controls.asp.

The issue title (“Python animations”) is sort of a misnomer because the question is really about embedding video in HTML, and how the video was created doesn’t matter. Given that this is an XML-oriented course, if you’re interested in this type of visualization, you might want to look into animated SVG. You can get started with the example at https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate. SVG files are typically much smaller than raster graphics (jpg, png) for images that use only a few colors and simple shapes, like lines, circles, rectangles, and polygons.