通过Javascript将URL解析为HTML5视频元素时，iOS7未检测到Content-Type

Question

I'm having an issue where I have a WebView with a video element on it. It looks something like this:

<video id="player" preload controls>
   <source id="source" src="" type="video/x-m4v"></source>
</video>

when I try to load the video through a javascript file it does not load on iOS device:

var player = dojo.byId("player");
player.src="http://trololoexample.com/trololoEndpoint?id=23454325&type=823405"
player.load()

also I've tried this:

var source = dojo.byId("source");
domAttr.set(source, "src", "http://trololoexample.com/trololoEndpoint?id=23454325&type=823405")
player.load()

I get this screen:

But when I test this in a web browser the video loads fine...

Here are some response headers from chrome, which is expected result (with video loading and playing fine):

And here is a response header from iPad, which is unexpected:

also you can see here that it did not recognise the type and shows it as "Other" instead of m4v:

Can you please help out? Thanks!

Update: same thing happens for .mov files, they do not load too on iOS

Answer 1

I'm not sure it will help you, but I know the webserver which serves the video file must allow byte-range requests.

If it doesn't then you'll get this "nice" picture.

You might want to look at Appendix A of this page if you run a php web server.

Hope this helps

Renaud

Answer 2

Looks like I needed a cert to play media files.

I found the solution here: https://blog.httpwatch.com/2013/12/12/five-tips-for-using-self-signed-ssl-certificates-with-ios/

Tip # 5: Consider Creating Your Own Certificate Authority (CA)

or

Tip #4 – Creating Self-Signed Certificates with OpenSSL is Easy