Phonegap / Cordova App HTML5 video won't play stating GET file:///[..] net::ERR_REQUEST_RANGE_NOT_SATISFIABLE

Question

In a Phonegap / Cordova App targeting Android and iOS I am trying to play a localy stored video with the HTML5 video player. This is what I am doing:

window.requestFileSystem( LocalFileSystem.PERSISTENT, 0, function ( fs ) {
    fs.root.getFile( filename, { create: false, exclusive: false }, function ( fileEntry ) {
        $( 'body' ).append( '<video id="video" autoplay="" controls="" style="height: 300px;"><source src=' + fileEntry.toURL() + ' type="video/mp4">Your browser does not support the video tag.</video>' );
    }, function ( err ) {
        console.error( 'error getting file! ' + err );
    } );
}, function ( err ) {
    console.error( 'error getting persistent fs! ' + err );
} );

The file exists - however the webview is not rendering the video but instead stating this error:

GET file:///data/user/0/com.test.testapp/files/files/testvid.mp4 net::ERR_REQUEST_RANGE_NOT_SATISFIABLE

EDIT: This is the Request Information:

Headers
    General
        Request URL: file:///data/user/0/com.test.testapp/files/files/testvid.mp4
        Referrer Policy: no-referrer-when-downgrade
Request Headers
    Provisional headers are shown
        Accept-Encoding: identity;q=1, *;q=0
        Range: bytes=0-
        User-Agent: Mozilla/5.0 (Linux; Android 7.0; SM-T813 Build/NRD90M; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/78.0.3904.108 Safari/537.36

I can't find anything at google that leads me into the right direction on howto solve this issue. Any hint would be highly appreciated.

Thanks!