Making sure the behavior of updating duration of HTMLMediaElement and MediaSource
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
Hi Yousuke, I think WebKit’s behavior matches the spec. The HTML5 spec says: “If no media data is available, then the attributes must return the Not-a-Number (NaN) value.” On the test page, there is no data appended to the media source, so there is no media data available for the video element. Best regards Peng
On Dec 6, 2020, at 10:48 PM, Kimoto, Yousuke (SIE) via webkit-dev <webkit-dev@lists.webkit.org> wrote:
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 _______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
Hi Peng, Thank you for your reply. Let me confirm what I understand about the webkit behavior of "duration update": https://www.w3.org/TR/html52/semantics-embedded-content.html#offsets-into-th...:
When the length of the media resource changes to a known value (e.g., from being unknown to known, or from a previously established length to a new length) the user agent must queue a task to fire a simple event named durationchange at the media element. (The event is not fired when the duration is reset as part of loading a new media resource.) If the duration is changed such that the current playback position ends up being greater than the time of the end of the media resource, then the user agent must also seek to the time of the end of the media resource.
In this part, I understand that "the media data" means data which a MediaSource object has. "duration" is set to HTMLMediaElemnt if media data is available. In my example, MediaSource and HTMLMediaElement are just initialized; No data is set. -- No media data is available. So MediaSource.duration is updated with "a new duration" and the new duration is set to HTMLMediaElement.duration but HTMLMediaElement.duration is not updated with the value. Is my understanding correct? Best Regards, Yousuke Kimoto -----Original Message----- From: Peng (WebKit) Liu <peng.liu6@apple.com> Sent: Tuesday, December 8, 2020 4:18 AM To: Kimoto, Yousuke (SIE) <Yousuke.Kimoto@sony.com> Cc: webkit-dev@lists.webkit.org Subject: Re: [webkit-dev] Making sure the behavior of updating duration of HTMLMediaElement and MediaSource Hi Yousuke, I think WebKit’s behavior matches the spec. The HTML5 spec says: “If no media data is available, then the attributes must return the Not-a-Number (NaN) value.” On the test page, there is no data appended to the media source, so there is no media data available for the video element. Best regards Peng
On Dec 6, 2020, at 10:48 PM, Kimoto, Yousuke (SIE) via webkit-dev <webkit-dev@lists.webkit.org> wrote:
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 _______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-dev
participants (2)
-
Kimoto, Yousuke (SIE)
-
Peng (WebKit) Liu