Add missing controls property to media containers

[Jaifroid]

Fixes #760. Although that should be fixed in the YouTube scraper, it will take a long time for that fix (if it is accepted) to come through to new ZIMs. This patch is a one-liner in the specific jQuery code that inserts media blobs, so I think it is worth doing, as it will redstore the ability to play videos to existing ZIM archives as well.

I tested this on khan-academy-videos_en_special-relativity-physics-khan-academy_2021-03.zim.

[mossroy]

Well, it's a jQuery-specific improvement that we decided to avoid.
But this one is very straightforward, has a significant impact, and looks very safe.

I did not test, but as long as you did, it's fine for me

[Jaifroid]

Well, it's a jQuery-specific improvement that we decided to avoid.
But this one is very straightforward, has a significant impact, and looks very safe.

I agree it's jQuery-specific, but I wouldn't call it an improvement. I would say it comes under the category of a bugfix to keep existing functionality, which I believe we said we'd do if it's not too complicated.

I tested on Edge Chromium, Edge Legacy and Firefox 92, with khan-academy-videos_en_special-relativity-physics-khan-academy_2021-03.zim. IE11 shows the controls (with this patch), but says "Invalid source...". This is because IE11 doesn't support WebM. On KJSW, I offer to a download of the video if the player doesn't support the format (IE11, Edge Mobile), but we don't do that on Kiwix JS.

I still need to do some more testing. I need to download some recent TED talks, to see if the issue is in those ZIMs (or not) and if this patch works with them. I'll post the results here.

[Jaifroid]

Slightly safer code, conforming to the spec. See https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute:

Boolean attributes are considered to be true if they're present on the element at all. You should set value to the empty string ("") or the attribute's name, with no leading or trailing whitespace. See the example below for a practical demonstration.

In other words, we shouldn't strictly set the attribute to "true", even though it works. We just have to ensure the attribute is present. See also https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-controls .

[Jaifroid]

I downloaded ted_en_global_issues_2021-08.zim, which turns out not to have this issue. However, the TED scraper is different from the YouTube scraper, and it appears from openzim/youtube#150 that the missing attribute is caused by the latter. In any case, this patch makes at least Khan Academy ZIMs useable in jQuery mode, and they're an important educational resource.