Video not playing on iOS10 Chrome


Answers

I just can't seem to locate what's wrong with this video snippet.

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/webm" src="sample.webm"></source>
    <source type="video/mp4" src="sample.mp4"></source>
</video>

...Update: It seems there's an issue with playing Webm files with iOS Chrome.

The simplest and best fix is to make sure you declare the mp4 file first and then declare webm in second place (the reverse of your shown order). I believe iOS expects an mp4 as first file in HTML5 video tags. All iOS sees is src="sample.webm" which is not a valid expected MPEG codec so leads to your "...play button that doesn't trigger anything". You got a silent error somewhere.

Try :

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/mp4" src="sample.mp4"></source>
    <source type="video/webm" src="sample.webm"></source>
</video>

Side note: Just my opinion but, I think having webm here is redundant since the main supporting system (Google-based tech) can already handle mp4 anyways.

Better to offer those video decoders in browsers [of end-users] a choice of mp4 or ogv (just in case of Firefox).

PS: Auto-play is disabled on most mobile systems due to SIM data allowances. The end-user must choose to play that video. Likely there are clever workarounds on the net, just remember though, this is expected behaviour so is not an issue with your current code.

Question

I just can't seem to locate what's wrong with this video snippet.

<video poster="sample.jpg" loop autoplay controls muted playsinline>
    <source type="video/webm" src="sample.webm"></source>
    <source type="video/mp4" src="sample.mp4"></source>
</video>

The video plays without any problems in Safari (haven't tested against earlier versions of iOS, but my only concern there is the autoplay issue?), but on Chrome the only thing I see is the cover image and a play button that doesn't trigger anything. Am I missing something? Do I really need to use JS to get it to work?

Update: It seems there's an issue with playing Webm files with iOS Chrome - I've tried several files from different locations and they seem to be needed to be downloaded first before being able to play.




MVC Video streaming to mobile web browsers

So after some time trying different stuff i dumpt in to this article from Microsoft witch solved my problem perfectly. Link to article

Here is the code that worked for me:

public HttpResponseMessage Get(string filename, string type)
{
     MemoryStream stream = new MemoryStream(new AzureMainStorage("avideo").GetFile(filename));

     HttpResponseMessage partialResponse = Request.CreateResponse(HttpStatusCode.PartialContent);
     partialResponse.Content = new ByteRangeStreamContent(stream, Request.Headers.Range, "video/mp4");
     return partialResponse;  
}





Tags