<html>
    <head>
      <base href="https://bugs.webkit.org/" />
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - playbackRate update while playing creates a small pause in the playback"
   href="https://bugs.webkit.org/show_bug.cgi?id=163433">163433</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>playbackRate update while playing creates a small pause in the playback
          </td>
        </tr>

        <tr>
          <th>Classification</th>
          <td>Unclassified
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 10
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>Media Elements
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned&#64;lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>njaal.borch&#64;gmail.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>Created <span class=""><a href="attachment.cgi?id=291592" name="attach_291592" title="Test page to demonstrate bug with a few measurements">attachment 291592</a> <a href="attachment.cgi?id=291592&amp;action=edit" title="Test page to demonstrate bug with a few measurements">[details]</a></span>
Test page to demonstrate bug with a few measurements

Scenario: play() audio or video, adjust playbackRate property, observe a small hickup (approx. 90ms) both in audio and video playback.

We have a use case where we need to do minor adjustments to the playback rate of audio and video elements. Other browsers can update the playbackRate property at any time without any audio/visual artifacts. Safari produces a significant pause in both audio and video playback.

I've created a small test page to demonstrate, even thought it can easily be reproduced and noticed by hand by something like element.play();setTimeout(function() {element.playbackRate = 1.2;}, 1000);

The attached test will first play 5s at speed 1.0, then 5s at speed 1.1 and finally 5s at speed 1.2.  The expected playback time is 16.5s of content. The printout shows measured speed (should be close to 1.0, 1.1 and 1.2), and the next line shows the difference in actual content played back compared to what was expected. The first is expected to be a bit off as it typically includes the media element to actually start playing, the next two should be close to 0 and fairly consistent.

Quick test results, Safari 10 on iOS: the last two diffs are about 80ms off. Safari 9.1 on osX: about 300ms off, same laptop with Chrome: about 10ms (no audio/visual effects).</pre>
        </div>
      </p>
      <hr>
      <span>You are receiving this mail because:</span>
      
      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>