hipstas / AudiAnnotate

Workflows for generating AV editions and exhibits using IIIF manifests by HiPSTAS and Brumfield Labs.
https://hipstas.github.io/AudiAnnotate/
Apache License 2.0
15 stars 8 forks source link

HTML/CSS bug that crashes JavaScript in Safari #222

Open tanyaclement opened 2 years ago

tanyaclement commented 2 years ago

I’m going to go out on a limb and say that it’s a HTML/CSS bug that crashes JavaScript in Safari that is handled more gracefully by other browsers. The scripting that populates the div tag with the id “uv” is the likely issue and it’s probably failing due to a typo in that line:

Note the missing space between id=”uv” and class=”uv uv-video sticky”. That appears to be throwing a JavaScript exception in Safari while other browsers are using the quote marks differentiate the attributes and work around the typo. The error in Safari then prevents the necessary the manifest data from being inserted into the div tag to allow the video to load and play.

I also think you’ll find the typo is present in a template file used to create the individual pages for the various FFPC videos so that’s why Safari is failing across the board.

Hope this helps,

Then I don’t have an answer for you – what I can conclusively say is that the div tag I mentioned is not being dynamically populated and that I can load and play the MP3/MP4 files listed in your original message using Safari from an iPad or older Mac workstation with the direct links to apps.lib.jmu.edu found below. I also saw a thrown JS error on the line that tries to initialize the myUV variable in the inline scripting so I’m assuming that’s the reason the manifest data isn’t being populated. The fact that the content works correctly with Chrome on a Mac IMHO is further evidence that this is a browser specific issue and not an operating system problem.

That said – apps.lib is an IIS web server, not a proper streaming server. You may want to look into implementing a streaming server that transmits the content in smaller chunks of rather than serves the entire file as a BLOB. I do recall reading last night that Safari can be sensitive to BLOB video with audio tracks so that may be part of the problem. But I’d still put my money on a JavaScript issue.

benwbrum commented 2 years ago

Steven points out that this is not a problem for the Camille video, hosted from the Internet Archive.

Moving the files to a different server did not fix the problem.

This appears to happen on both Chrome and Safari on iOS devices.