Protocol Handler: WEBM does not load when used in video HTML tag

[lidel]

Summary

WEBM video fails to load on initial load when used in <video> tag.
If opened directly at least once, then loads fine.

Discovered this problem in IPFS Companion, which was streaming videos from IPFS,
but I created a simplified repro without IPFS that downloads file via HTTP and produces the same error.
Tested with 2MB and 22MB files, same result for both. Steps below use 2MB file.

How to Reproduce

1. Run demo:protocol from my video-render-bug-demo branch:

   git clone -b video-render-bug-demo --depth 1 https://github.com/lidel/libdweb.git
   cd libdweb
   yarn && yarn demo:protocol
   

2. Open dweb://html/ first: loading via <video> tag will fail with this error.

   • Looks like a race-condition of sorts related to content-type sniffing. It failed to guess content-type when video was not yet in cache. @Gozala this may be remotely related to discussion about content-type we had at DWeb: if browser could wait until API returns content-encoding, content-type along with content's asynciterator, that could solve this issue as well.

3. Open dweb://html/video.webm directly: it will load and play just fine.

4. Open dweb://html/ again: loading via <video> tag will work this time.

   • It seems browser's content-type sniffing fails when video is not yet in cache, but works fine after initial load.

5. Open dweb://foo/: loading via <video> tag from different origin will fail.

   • This is basically the same issue as in step 4) in Protocol Handler: SVG does not render when used in img HTML tag #54, so I guess we will follow it in Resources from different origin but same protocol should load #55

[Gozala]

If I had to guess it's the same as #54 as <img /> accepts image/* likely <video/> accepts video/* but we default to application/x-unknown-content-type. I'll verify if that is the case and if so will close this as duplicate for #54

[Gozala]

Well only after running it myself I did noticed that warning in the console actually explicitly mentioned it could not match content type.

[Gozala]

As I suspected it's the same issue as #54 as this change loads the video

diff --git a/demo/protocol/protocol.js b/demo/protocol/protocol.js
index 4f88087..8270bf3 100644
--- a/demo/protocol/protocol.js
+++ b/demo/protocol/protocol.js
@@ -50,6 +50,7 @@ browser.protocol.registerProtocol("dweb", request => {
     }
     case "dweb://html/video.webm": {
       return {
+        contentType: "video/webm",
         content: (async function*() {
           const response = await fetch(
             "https://ipfs.io/ipfs/bafybeigwa5rlpq42cj3arbw27aprhjezhimhqkvhbb2kztjtdxyhjalr3q/big-buck-bunny_trailer.webm",

I'm closing this as being duplicate of #54

[Gozala]

Reopening because #60 fixed #54 without fixing this one.

[lidel]

Just for the record, retested it with async API and works as expected, thanks!
(cross-origin fails but that is separate issue tracked in #55)