[BUG] Parse and load all sources in Canvas

[Dananji]

Description

In the IA Manifest there are 3 sources mentioned for the Canvas. However Ramp is only showing 2 options in the quality selector; ogg video and webm. It's not showing the source with the format: "video/mpeg"
Only Chrome and Safari display 2 sources and loads the media from ogg video labeled source URL, while Firefox fails to load the media on page load.
Ramp has the ability to display .mp4 files. Therefore, this error could be due to the format specified for this source URL. And when the format is changed from "video/mpeg" to "video/mp4" in the Manifest, the video gets loaded into the player.

Done Looks Like

• Parse and show all sources in the Canvas
• Investigate and fix the issue with Firefox failing to load any of the sources
• Investigate and fix the issue with MPEG source being unsupported by VideoJS; identify what's causing it to error out

[Dananji]

I found a couple of issues for the source files in this Manifest.

• Primary issue: The .mp4 file has a format: 'video/mpeg' and Ramp uses this format property as the MIME type of the media file in VideoJS. Because both the browser and VideoJS rely on this MIME type to determine if they can play a file, the mismatch between the actual file and the MIME type leads to VideoJS to throw an error rejecting the file which shows up in the player when the Manifest is loaded into Ramp.

Once I fixed this issue, I was able to see all 3 source files in the quality selector menu and select and play each file in Chrome.
In both Firefox and Safari, I was able to see all 3 sources in the quality selector menu, however when I selected the Ogg video source file, the player loaded the .webm file (saw this URL as the value of src attribute of the <video> element in DOM) without the quality selector icon in the control bar.

• Secondary issue: In the Manifest this .ogv file has a MIME type video/ogg, but the actual file seems to be an audio file. Even though this MIME type/file extension combo is correct, the browser sees an incorrect MIME type associated with the media file. Since both Firefox and Safari strictly enforce MIME types, selecting this source file causes VideoJS to fallback to the next source file in the list, i.e. .webm file and lose all source information in sources list in VideoJS. This results in an empty source list, causing the quality selector icon to disappear. To fix this, I added a check for this file extension and MIME type combo to reset the MIME type to audio/ogg. This fix works for this file since the file is audio, but needs to be re-evaluated and monitored if there are further issues in the future.
• Additional issue: Safari doesn't support both OGG/OGV natively which causes the Safari to lose the quality selector once the Ogg video file is selected even after the fix for the secondary issue. So I added a check to see if the specific MIME type is supported by the browser before the source files are passed down to VideoJS in Ramp. This blocks the .ogv file from getting added to the quality selector at all for Safari.

@markpbaggett When you have the time, would you be able take a look at these MIME type/file extension combos in this Manifest? And please let me know if there are any other issues. (Once this PR is merged, these changes can be tested in https://ramp.avalonmediasystem.org/).

[joncameron]

https://iiif.archive.org/iiif/cruz-test/manifest.json is a known flaky URL that seems to frequently return 404s. I'll find a different IA manifest to test with across all browsers so I can finish QA on this.