Dash stream with captions causes infinite loop of change events in Safari

[okarlsson]

Current Behavior:

We're running the vidstack player with CloudFlare streams and just enabled captions. Everything works fine in chrome, but when running the VidStack player in Safari everything seizes up and my phone and computer goes up to 100% CPU consumption.

After investigating this for a bit, it seems like it's related to an infinite loop of change events getting triggered when captions are enabled.

Loading this .mpd file into the vidstack demo player works fine in Safari:

<?xml version="1.0" encoding="UTF-8"?>
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" profiles="urn:mpeg:dash:profile:isoff-live:2011" type="static" mediaPresentationDuration="PT40.5S" minBufferTime="PT8S">
  <Period id="0">
    <AdaptationSet id="981227958" mimeType="audio/mp4" segmentAlignment="true" lang="original">
    <Representation id="1044203031" audioSamplingRate="48000" bandwidth="131327" codecs="mp4a.40.2">
  <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"></AudioChannelConfiguration>

  <SegmentTemplate duration="192326" initialization="../../237ae044e588446da2ef93a8541659f7/audio/131/init.mp4?p=eyJ0eXBlIjoiaW5pdCIsInZpZGVvSUQiOiIyMzdhZTA0NGU1ODg0NDZkYTJlZjkzYTg1NDE2NTlmNyIsIm93bmVySUQiOjEwODE1MzMsImNyZWF0b3JJRCI6IiIsInVzZVZPRE9URkUiOmZhbHNlLCJmcm9tTWV6emFuaW5lIjpmYWxzZSwic3RvcmFnZVByb3ZpZGVyIjo0LCJ0cmFjayI6IjA5YmYxNzMwZDY5OTRhMGYyZjQ1MGExODljNTNiZGI0IiwicmVuZGl0aW9uIjoiMTA0NDIwMzAzMSIsIm11eGluZyI6IjExMDAzNjQ3MjgifQ&amp;s=wooYKHAmw7p9YV3Dj3FbS1IEamTDpzXDlcOdOcOzTz_Dl8OxeXV-w4XCjA" media="../../237ae044e588446da2ef93a8541659f7/audio/131/seg_$Number$.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiIyMzdhZTA0NGU1ODg0NDZkYTJlZjkzYTg1NDE2NTlmNyIsIm93bmVySUQiOjEwODE1MzMsImNyZWF0b3JJRCI6IiIsInNlZ21lbnREdXJhdGlvblNlY3MiOjQuMDA2Nzg3ODc4Nzg3ODc5LCJ1c2VWT0RPVEZFIjpmYWxzZSwiZnJvbU1lenphbmluZSI6ZmFsc2UsInN0b3JhZ2VQcm92aWRlciI6NCwidHJhY2siOiIwOWJmMTczMGQ2OTk0YTBmMmY0NTBhMTg5YzUzYmRiNCIsInJlbmRpdGlvbiI6IjEwNDQyMDMwMzEiLCJtdXhpbmciOiIxMTAwMzY0NzI4In0&amp;s=wqrDl0TCssKQwopeCcKWw6XDm8O0FMODw68eWsKUw6xxwp7CiAw5wqnCucO-wqkewoTDoW8" startNumber="1" timescale="48000"></SegmentTemplate>
</Representation>
  
</AdaptationSet>

<AdaptationSet id="1032043790" mimeType="video/mp4" segmentAlignment="true" >
    <Representation id="1044203045" bandwidth="964812" codecs="avc1.4d401e" frameRate="30/1" height="640" width="360">
  <SegmentTemplate duration="120000" initialization="../../237ae044e588446da2ef93a8541659f7/video/640/init.mp4?p=eyJ0eXBlIjoiaW5pdCIsInZpZGVvSUQiOiIyMzdhZTA0NGU1ODg0NDZkYTJlZjkzYTg1NDE2NTlmNyIsIm93bmVySUQiOjEwODE1MzMsImNyZWF0b3JJRCI6IiIsInVzZVZPRE9URkUiOmZhbHNlLCJmcm9tTWV6emFuaW5lIjpmYWxzZSwic3RvcmFnZVByb3ZpZGVyIjo0LCJ0cmFjayI6Ijg4N2NiOWE4M2IxMGFmYmRjOWFlMTk5NmUxMjkzZTVjIiwicmVuZGl0aW9uIjoiMTA0NDIwMzA0NSIsIm11eGluZyI6IjExMDAzNjQ3NDIifQ&amp;s=VXZPw7bDu8Onw74SaMOCMCvCt0bCtcO0wonDqn8cDyzCkS3Dr2t5ZMOGw5zClXo" media="../../237ae044e588446da2ef93a8541659f7/video/640/seg_$Number$.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiIyMzdhZTA0NGU1ODg0NDZkYTJlZjkzYTg1NDE2NTlmNyIsIm93bmVySUQiOjEwODE1MzMsImNyZWF0b3JJRCI6IiIsInNlZ21lbnREdXJhdGlvblNlY3MiOjQsInVzZVZPRE9URkUiOmZhbHNlLCJmcm9tTWV6emFuaW5lIjpmYWxzZSwic3RvcmFnZVByb3ZpZGVyIjo0LCJ0cmFjayI6Ijg4N2NiOWE4M2IxMGFmYmRjOWFlMTk5NmUxMjkzZTVjIiwicmVuZGl0aW9uIjoiMTA0NDIwMzA0NSIsIm11eGluZyI6IjExMDAzNjQ3NDIifQ&amp;s=QSfCl8OFCS_DrMK_H8KTw646w4Z3a29mw7tqwoPDg0QuOlNGLktRSjMO" startNumber="1" timescale="30000"></SegmentTemplate>
</Representation>
</AdaptationSet>

  </Period>
</MPD>

But if I load the same .mpd file with captions added, everything grinds to a halt

<?xml version="1.0" encoding="UTF-8"?>
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011" profiles="urn:mpeg:dash:profile:isoff-live:2011" type="static" mediaPresentationDuration="PT40.5S" minBufferTime="PT8S">
  <Period id="0">
    <AdaptationSet id="981227958" mimeType="audio/mp4" segmentAlignment="true" lang="original">
      <Representation id="1044203031" audioSamplingRate="48000" bandwidth="131327" codecs="mp4a.40.2">
        <AudioChannelConfiguration schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011" value="2"></AudioChannelConfiguration>

        <SegmentTemplate duration="192326" initialization="../../237ae044e588446da2ef93a8541659f7/audio/131/init.mp4?p=eyJ0eXBlIjoiaW5pdCIsInZpZGVvSUQiOiIyMzdhZTA0NGU1ODg0NDZkYTJlZjkzYTg1NDE2NTlmNyIsIm93bmVySUQiOjEwODE1MzMsImNyZWF0b3JJRCI6IiIsInVzZVZPRE9URkUiOmZhbHNlLCJmcm9tTWV6emFuaW5lIjpmYWxzZSwic3RvcmFnZVByb3ZpZGVyIjo0LCJ0cmFjayI6IjA5YmYxNzMwZDY5OTRhMGYyZjQ1MGExODljNTNiZGI0IiwicmVuZGl0aW9uIjoiMTA0NDIwMzAzMSIsIm11eGluZyI6IjExMDAzNjQ3MjgifQ&amp;s=wooYKHAmw7p9YV3Dj3FbS1IEamTDpzXDlcOdOcOzTz_Dl8OxeXV-w4XCjA" media="../../237ae044e588446da2ef93a8541659f7/audio/131/seg_$Number$.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiIyMzdhZTA0NGU1ODg0NDZkYTJlZjkzYTg1NDE2NTlmNyIsIm93bmVySUQiOjEwODE1MzMsImNyZWF0b3JJRCI6IiIsInNlZ21lbnREdXJhdGlvblNlY3MiOjQuMDA2Nzg3ODc4Nzg3ODc5LCJ1c2VWT0RPVEZFIjpmYWxzZSwiZnJvbU1lenphbmluZSI6ZmFsc2UsInN0b3JhZ2VQcm92aWRlciI6NCwidHJhY2siOiIwOWJmMTczMGQ2OTk0YTBmMmY0NTBhMTg5YzUzYmRiNCIsInJlbmRpdGlvbiI6IjEwNDQyMDMwMzEiLCJtdXhpbmciOiIxMTAwMzY0NzI4In0&amp;s=wqrDl0TCssKQwopeCcKWw6XDm8O0FMODw68eWsKUw6xxwp7CiAw5wqnCucO-wqkewoTDoW8" startNumber="1" timescale="48000"></SegmentTemplate>
      </Representation>

    </AdaptationSet>

    <AdaptationSet id="1032043790" mimeType="video/mp4" segmentAlignment="true">
      <Representation id="1044203045" bandwidth="964812" codecs="avc1.4d401e" frameRate="30/1" height="640" width="360">
        <SegmentTemplate duration="120000" initialization="../../237ae044e588446da2ef93a8541659f7/video/640/init.mp4?p=eyJ0eXBlIjoiaW5pdCIsInZpZGVvSUQiOiIyMzdhZTA0NGU1ODg0NDZkYTJlZjkzYTg1NDE2NTlmNyIsIm93bmVySUQiOjEwODE1MzMsImNyZWF0b3JJRCI6IiIsInVzZVZPRE9URkUiOmZhbHNlLCJmcm9tTWV6emFuaW5lIjpmYWxzZSwic3RvcmFnZVByb3ZpZGVyIjo0LCJ0cmFjayI6Ijg4N2NiOWE4M2IxMGFmYmRjOWFlMTk5NmUxMjkzZTVjIiwicmVuZGl0aW9uIjoiMTA0NDIwMzA0NSIsIm11eGluZyI6IjExMDAzNjQ3NDIifQ&amp;s=VXZPw7bDu8Onw74SaMOCMCvCt0bCtcO0wonDqn8cDyzCkS3Dr2t5ZMOGw5zClXo" media="../../237ae044e588446da2ef93a8541659f7/video/640/seg_$Number$.mp4?p=eyJ0eXBlIjoic2VnbWVudCIsInZpZGVvSUQiOiIyMzdhZTA0NGU1ODg0NDZkYTJlZjkzYTg1NDE2NTlmNyIsIm93bmVySUQiOjEwODE1MzMsImNyZWF0b3JJRCI6IiIsInNlZ21lbnREdXJhdGlvblNlY3MiOjQsInVzZVZPRE9URkUiOmZhbHNlLCJmcm9tTWV6emFuaW5lIjpmYWxzZSwic3RvcmFnZVByb3ZpZGVyIjo0LCJ0cmFjayI6Ijg4N2NiOWE4M2IxMGFmYmRjOWFlMTk5NmUxMjkzZTVjIiwicmVuZGl0aW9uIjoiMTA0NDIwMzA0NSIsIm11eGluZyI6IjExMDAzNjQ3NDIifQ&amp;s=QSfCl8OFCS_DrMK_H8KTw646w4Z3a29mw7tqwoPDg0QuOlNGLktRSjMO" startNumber="1" timescale="30000"></SegmentTemplate>
      </Representation>
    </AdaptationSet>

    <AdaptationSet id="511534866" mimeType="text/vtt" segmentAlignment="true" lang="English (auto-generated)">
      <Representation id="1044204754" bandwidth="256">

        <BaseURL>../../237ae044e588446da2ef93a8541659f7/text/en.vtt?p=eyJ0eXBlIjoiZmlsZSIsInZpZGVvSUQiOiIyMzdhZTA0NGU1ODg0NDZkYTJlZjkzYTg1NDE2NTlmNyIsIm93bmVySUQiOjEwODE1MzMsImNyZWF0b3JJRCI6IiIsInRyYWNrIjoiZGQ3YzY3ZTgxNmFmZjAyNmZhN2RkNGE5YjM1NWYxNDgiLCJyZW5kaXRpb24iOiIxMDQ0MjA0NzU0IiwibXV4aW5nIjoiMTEwMDM2NjQ1MSJ9&amp;s=w53ChsKawq3Cp8OvwqvDmsKbw57CvMOJZMOKflDCssO8NMOzHSYFw69YYyvDlAhNwr3CnQ</BaseURL>
      </Representation>

    </AdaptationSet>

  </Period>
</MPD>

If i profile the page in Safari, we can see the CPU being pinned to 100%

Stats show that 367k change events has been triggered from an Unknown Location in about ~10 seconds

Expected Behavior:

No infinite loop of change events when a dash stream includes captions.

Steps To Reproduce:

1. Visit this link in Safari and Chrome

🔥 Watch computer get toasty in Safari but be fine in Chrome

Environment:

• Device: MacBook Pro M3
• OS: macOs [email protected] (24D81)
• Browser: [email protected]