[webkit-dev] Making sure the behavior of updating duration of HTMLMediaElement and MediaSource

Sun Dec 6 22:48:50 PST 2020

Hi all,

I have a question about MediaSource's duration.

What is an expected result of "duration" after processing the following steps?
1) Creating HTMLMediaElement object.
2) Creating MediaSource object, which is set to the HTMLMediaElement of step 1)
3) Updating MediaSource.duration with some numbers. (e.g. 10, 100 etc)
4) What does "duration" return?

The table below shows "duration" of HTMLMediaElement and MediaSource on web browsers with the attached sample, and the results are different.
(NOTE: the sample at the bottom of this mail is made as a part of LayoutTest media-source.)

       |  HTMLMediaElement |  MediaSource |
 Chrome:       updated     |    updated   |
 Safari:        NaN        |    updated   |
    GTK:        NaN        |    updated   | *) MiniBrowser (GTK)
Firefox:         -         |       -      | *) no durationchange event happened.

Points:
 - Safari and GTK are the same results, it's natural because they use the same implementation of "duration".
   It doesn't update HMLMediaElement.duration because the HTMLMediaElement object's readyState is HAVE_NOTHING.
 - Chrome updates HTMLMediaElement.duration and MediaSource.duration.
 - Firefox doesn't fire a "durationchange" event.

Could anyone can explain which behavior matches the W3C standards?

Reference:
https://www.w3.org/TR/media-source/#duration-change-algorithm
https://www.w3.org/TR/html51/semantics-embedded-content.html#durationChange

Sample:
<!DOCTYPE html>
<html>
<head>
    <title>media-source-set-duration-before-append.html</title>
    <script src="../video-test.js"></script>
    <script>
    var source;
    function runTest() {
        findMediaElement();
        source = new MediaSource();
        waitForEventOn(source, 'sourceopen', sourceOpen);
        run('video.src = URL.createObjectURL(source)');
    }
    function sourceOpen() {
        waitForEventOn(video, 'durationchange', durationChange);
        run('source.duration = 10.0');
    }

    function durationChange() {
        testExpected('source.duration', 10.0);
        testExpected('video.duration', 10.0);
        endTest();
    }
    </script>
</head>
<body onload="runTest()">
    <video></video>
</body>
</html>

Best Regards,

--
Yousuke Kimoto