Dev server cannot serve video to iOS devices (server does not reply to range requests properly)

[kfatehi]

Expected behavior

hexo server should run a server that can reply to range requests appropriately. When viewing a video from a post we would expect that an iPhone user should be able to view it. Apple Safari strictly uses range requests to fetch video content so we expect Hexo's server to support this and serve the video just fine.

Actual behavior

Viewing under wireshark we can see clearly that the server is not replying to range requests the way that it should. Safari browser thus does not bother to cache any of the video and fails to play it at all. Works fine in Chrome on desktop.

How to reproduce?

• create an appopriately encoded video

Apple is also very finicky about this too, I use the following technique to create an iOS-compatible mp4 file:

#!/bin/bash
# Usage: this_script.sh input_file output_file
ffmpeg -an -i $1 -c:v libx264 -profile:v baseline -level 3.0 -c:a aac -movflags +faststart \
-filter_complex "[0:v]scale=ih*16/9:-1,boxblur=luma_radius=min(h\\,w)/20:luma_power=1:chroma_radius=min(cw\\,ch)/20:chroma_power=1[bg];[bg][0:v]overlay=(W-w)/2:(H-h)/2,crop=h=iw*9/16" \
 $2

• create a post with the video embedded:

<video controls>
  <source src="{% asset_path test.mp4 %}" type="video/mp4">
  Sorry, your browser doesn't support embedded videos.
</video>

• run the server with hexo server
• try to view the post and witness it not working
• now generate the static files with hexo generate and run npx http-server -p 4000 (it will serve public folder automatically)
• view the video and see that it will play fine (if your encoding is okay, per ffmpeg commands above)
• view it with wireshark if you want and see the difference between the way the two servers handle the range request coming from the browser.

Is the problem still there under "Safe mode"?

N/A

Environment & Settings

Node.js & npm version(node -v && npm -v)

v14.17.0

Hexo and Plugin version(npm ls --depth 0)

hexo-site@0.0.0 C:\workspace\blog
+-- hexo@5.4.0
+-- hexo-cli@4.3.0
+-- hexo-deployer-git@3.0.0
+-- hexo-generator-archive@1.0.0
+-- hexo-generator-category@1.0.0
+-- hexo-generator-cname3@1.0.1
+-- hexo-generator-feed@3.0.0
+-- hexo-generator-index@2.0.0
+-- hexo-generator-tag@1.0.0
+-- hexo-renderer-ejs@1.0.0
+-- hexo-renderer-marked@4.1.0
+-- hexo-renderer-stylus@2.0.1
`-- hexo-server@2.0.0

Your package.json package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "hexo server",
    "hexo": "hexo"
  },
  "hexo": {
    "version": "5.4.0"
  },
  "dependencies": {
    "hexo": "^5.4.0",
    "hexo-cli": "^4.3.0",
    "hexo-deployer-git": "^3.0.0",
    "hexo-generator-archive": "^1.0.0",
    "hexo-generator-category": "^1.0.0",
    "hexo-generator-cname3": "^1.0.1",
    "hexo-generator-feed": "^3.0.0",
    "hexo-generator-index": "^2.0.0",
    "hexo-generator-tag": "^1.0.0",
    "hexo-renderer-ejs": "^1.0.0",
    "hexo-renderer-marked": "^4.1.0",
    "hexo-renderer-stylus": "^2.0.1",
    "hexo-server": "^2.0.0"
  }
}

Others

Apple's finicky nature both in encoding and in serving video files for Safari are defined here:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW4

[SukkaW]

@kfatehi Try adding this to your site's _config.yml?

# _config.yml
server:
  serveStatic:
    acceptRanges: true

hexo-server uses serve-static under the hood, which has an option for range support.

[kfatehi]

@SukkaW thank you I didn't know about hexo-server options that's nice; I tested that they make a difference by changing my port number.

However, acceptRanges: true did not fix the issue. This makes sense because when I looked up serve-static docs I see that it says acceptRanges defaults to true. A cursory search through hexo-server does not yield evidence of that being forced false, so I don't think setting it to true would be necessary.

If I had to guess I would suspect some other middleware defined in hexo-server is breaking serve-static's default handling of range request/response.

[kfatehi]

I just wrote a test (you can see it referenced in the commit above) which passes, so I don't think the error is in hexo-server anymore. Unless maybe the triviality of the path somehow avoids those middlewares (i.e. avoids autobuild paths that an actual asset would be when existing inside the blog post sources.... 🤔 )

[kfatehi]

@stevenjoezhang I just realized that you moved this from hexo to hexo-server, so maybe you can help with this investigation: do you think the test above is conclusive to indicate that the problem is not in hexo-server, but in hexo itself?

[kfatehi]

I spent last few hours trying to dig deeper (within npm linked hexo, hexo-cli, hexo-server) but I got lost somewhere around Reflect.apply which I didn't even know was a feature of JS. Throwing in the towel and raising the white flag.