4

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.

2
  • Have you made shure that your internal IP "192.168.1.72:9981/stream/channelid/… is reachable by your phone and not just your computer?
    – Rafael T
    Commented Apr 19, 2018 at 14:27
  • Yes yes, Rafael. I m running web server and tv(which is creating stream URL) on raspberry pi within my local network. And the web server shows and plays the stream just find if i use my windows laptop or friend's mac. But if i use iphone or android tablet - it doesn't work
    – Ilja Leiko
    Commented Apr 19, 2018 at 14:52

6 Answers 6

1

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

5
  • 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) :/
    – Ilja Leiko
    Commented Apr 19, 2018 at 14:50
  • did you add the other video formats, that is probably why. try adding in mp4 format and ogv.
    – ZackAttack
    Commented Apr 19, 2018 at 15:03
  • 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
    Commented Apr 19, 2018 at 15:09
  • 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
    – Ilja Leiko
    Commented Apr 19, 2018 at 15:10
  • 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
    – ZackAttack
    Commented Apr 19, 2018 at 15:40
1

This might work for you. It works fine for me.

<video  autoplay="autoplay" loop="loop" muted defaultMuted playsinline>
0

I would try enabling controls as on iOS if your video is supposed to start automatically it will not allow it.

Another thing is to try adding an HTTP Range Header, it helps to split video into byte ranges which is something to take into mind with mobile. This is more for iOS in general but take a look at this link: http://fdiv.net/2013/05/17/getting-html5-video-work-ios-mobile-safari

Also as mentioned by other check the format of your video you should ALWAYS have multiple types available.

0

Video tag doesn't work on mobile. What I've seen people do lately is use gif's as the poster of the video on mobile. I would also look into tools like Wistia for extra video support. Gifs work on mobile, but as the video assets, they take a while to load since they're usually big.

I don't recommend self-hosting as you won't have a ton of support such as slowly loading the video or dynamically switch from 320p version to HD version as it loads, etc.

For example https://wistia.com/learn/marketing/boost-engagement-with-gifs

0

If you're using a separate host for your files, its server should have a valid SSL certification like my case. My android video player did not work until I added a certification.

0

For me the problem was the format of video. Basically the format was m4v, I convert the video to mp4 video. And the mp4 video was not working, but the m4v video was working. The mp4 format was working on my laptop (safari and chrome and on my iphone (safari and chrome) but not on my android phone (chrome). The m4v was working everywhere.

My video tag (with React js) : <video width={250} autoPlay loop muted playsInline controlsList='nodownload' tabIndex={"-1"} style={{borderRadius: '10px'}} src={"VIDEOLINK"}>

Maybe you should check the format of video and use the original format video if you can.

I hope it will help.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.