HTML5 video tag doesn't work on mobile

Question

I have TV video stream (which is apparently mpeg-ts stream), if I use html5 video tags it all works find on win/mac machines using Chrome.

<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
<source src=""http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=matroska type="video/webm">
</video>

But that doesn't work on Android tablet nor on iOS.

I have tried installing multiple different JS player, such as mediaelement, plyr, video.js, mpegts... And I have installed like all three browsers on Android tablet - Chrome, Opera and Mozilla for testings. Every single JS player works fine if I watch the video from my laptop (Chrome), but none of them works when I access from Android device.

The furthest I can get is using Opera+plyr(or video.js) to get an audio playing fine, but with a black screen, no video.

Solution

add this as your video starting tag and it will autoplay for android and safari mobile :

<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%">

you also need mp4, ogv and webm formats for crossbrowser

Comments

[Ilja Leiko]

Thank you, Zack for your help, but it didn''t help. It autoplays in my PC Chrome now and works fine, but the exact same thing on Android or iOS doesnt appear to work at all. The whole media box is not even showing(as though it's just a black space in html) :/

[ZackAttack]

did you add the other video formats, that is probably why. try adding in mp4 format and ogv.

[Ilja Leiko]

I have added 'controls' to your approach and when the page loads on android and i click Play button it acts as thought it would start playing now(loading) and then kick out back to the control state, where u have to press play button to start it.

[Ilja Leiko]

what if i dont have any other formats? :D Do i need to convert the stream on the go? I m getting that stream link from TV decoder, without an option to change it's output format

[ZackAttack]

browsers only accept certain video formats. This is why you are having issues. You need to convert the video formats and add them like this from MDN