HTML5 Javascript Videoplayer Chrome Error

[FPSDev]

I'm trying to make an interactive video player with canvas. However, I stumbled upon a difficult error to debug. Currently I have my player working on a Mac Chrome browser (v50.0), however when I try to play it on a Windows Chrome browser (v52.0) the video errors when it reaches an unbuffered area. The error is  Using `chrome://media-internals` I found the error:

`Dropping audio frame which failed decode with timestamp: ..., duration: ..., packet size: ... bytes`. This error occurs around 450 times, then the html5 video element issues a video decode error (firing the error event listener). It is a MP4 video file (details below).

*Edit: When looking up the version number of my browser I found out I could update my Mac also to version 52.0. By doing so, the error also occurs on my Mac now.*

**Question:** Does anyone here know why this problem occurs and how I can prevent this error? Why does it only occur when it reaches an unbuffered area? Is it an video format issue or do I not handle buffering correctly?

*Background information*

The function I use to check if the video is buffering is as follows: 

    var buffering = true, 

        lastPlayPos,

        checkBufferIv = 50, 

        element = document.createElement('video');

        element.src = "videosrc";

        element.setAttribute('webkit-playsinline', 'true');

        element.crossOrigin = "Anonymous";

        element.setAttribute('playsinline', 'true');

        element.addEventListener('canplaythrough',function(){

            buffering = false;

            setInterval(checkBuffering,checkBufferIv);

        });

        element.addEventListener('error', function(){}/*handles error*/);

   

    function checkBuffering() {

        // checking offset, e.g. 1 / 50ms = 0.02

        var offset = 1 / checkBufferIv

        // if no buffering is currently detected,

        // and the position does not seem to increase

        // and the player isn't manually paused...

        if (!buffering &&

            element.currentTime < (lastPlayPos + offset) &&

            Player.getState() === 2){

            buffering = true;

        }

        // if we were buffering but the player has advanced,

        // then there is no buffering

        if (buffering &&

            element.currentTime >= (lastPlayPos + offset)){

            buffering = false;

        }

        lastPlayPos = element.currentTime;

    }

Furthermore, the video element can be played or paused based on the interaction of the user (as it is an interactive videoplayer), this might affect buffering.

Finally, the info media-internals gives about the video:

FFmpegDemuxer: created video stream, config codec: h264 format: 2    profile: h264 main coded size: [1280,720] visible rect: [0,0,1280,720] natural size: [1280,720] has extra data? true encrypted? false

FFmpegDemuxer: created audio stream, config codec: aac bytes_per_channel: 4 channel_layout: 3 samples_per_second: 48000 sample_format: 6 bytes_per_frame: 8 seek_preroll: 0ms codec_delay: 0 has extra data? true encrypted? false

In hope of any information at all,

With kind regards,

fps

[PhistucK]

This group discusses the Developer Tools feature of Google Chrome and not general web development issues.

You can search crbug.com for an existing issue and star it. If you cannot find one, file a new issue using the "New issue" link on the same page.

Please, do not add a "+1" or "Me too" or "Confirmed" (or similar) comment. It just wastes the time of Chrome engineers and sends unnecessary e-mails to all of the people who starred the issue.

You can reply with a link to the found or created issue and might get triaged (and fixed) faster.

Thank you.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/cb04746a-1d0a-462a-9aa6-e701cc6429e0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.