thiagopnts / clappr-video360

360 video plugin for Clappr
https://thiago.me/clappr-360
MIT License
109 stars 22 forks source link

Error code: html5_video:4 on Android mobile browsers #36

Open DMW007 opened 3 years ago

DMW007 commented 3 years ago

Hello, I noticed that the plugin works fine on my PC in Firefox/Chromium, but not on my mobile. On Android 9 I get Error code: html5_video:4 after tapping play in both browsers:

grafik

My test code:

<div id="player"></div>
<script type="text/javascript" charset="utf-8"
    src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="clappr-video360.min.js"> </script>
<script type="text/javascript" charset="utf-8">
    var playerElement = document.getElementById("player");
    var player = new Clappr.Player({
        source: 'https://my-server/movie.mp4',
        poster: 'http://clappr.io/poster.png',
        mute: true,
        height: 360,
        width: 640,
        plugins: {
            container: [Video360]
        }
    });
    player.attachTo(playerElement);
</script>

On Safari mobile it works. Testing with other engines is not possible there cause the manufacturer doesn't allow to use other engines except their own.

The demo works, so I thought it is related to my movie file. The main differences I saw between the cool.mp4 example movie is the frame rate (59.94 vs 29.97) and the resolution. So I tried to reduce the fps using ffmpeg, but without success:

ffmpeg -i raw-video.mp4 -filter:v fps=fps=29.970030 30fps.mp4
DMW007 commented 3 years ago

I fould the problem: It was the resolution. My video was recorded in 4k (4096x2048). It seems that Firefox/Chromium on Android only support FHD in this constellation. After downscaling my video with ffmpeg it worked:

ffmpeg -i raw-video.mp4 -vf "scale=1920x1080" fhd.mp4

For me, FHD is currently enough and converting it to FHD for the web is a suiteable workaround. But higher resolutions will be interesting in the future since they become more and more widespread. So I'll keep the issue open. I'm not sure if you can fix this or it is a limitation of the mobile Firefox/Chromium. Or maybe also my device, I tested on a 1080p smartphone. However I'd expect that higher source resolutions shouldn't be a problem, like on other players.