Add noscript fallbacks for img, audio, and video; improve audio conversion to amp-audio; add AMP [fallback] for amp-audio/amp-video

[westonruter]

Appends original img to amp-img under noscript for no-JS browsers. This is recommended by AMP:

Displaying images when JavaScript is disabled

As <amp-img> relies on JavaScript, if the user chooses to disable scripts, images won't display. In this case, you should provide a fallback to the image using <img> and <noscript>, like so:

<amp-img src="images/sunset.jpg"
  width="264"
  height="195">
  <noscript>
    <img src="images/sunset.jpg" width="264" height="195" />
  </noscript>
</amp-img>

So, given an img element:

<img src="http://placehold.it/300x400" width="300" width="400">

Before this would be sanitized as:

<amp-img src="http://placehold.it/300x400" width="300" width="400" class="amp-wp-enforced-sizes"></amp-img>

But after this change it would be:

<amp-img src="http://placehold.it/300x400" width="300" width="400" class="amp-wp-enforced-sizes">
    <noscript>
        <img src="http://placehold.it/300x400" width="300" width="400">
    </noscript>
</amp-img>

This also short-circuits the img, video, and audio sanitizers for elements that are inside of noscript elements. Similarly, the AMP equivalent to wp_mediaelement_fallback() is implemented so that there are fallback links inside the amp-audio elements.

Audio Improvements

Audio non-AMP

<figure class="wp-block-audio">
    <audio controls src="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3"></audio>
    <figcaption>Caption</figcaption>
</figure>

<!--[if lt IE 9]><script>document.createElement('audio');</script><![endif]-->
<audio class="wp-audio-shortcode" id="audio-87-1" preload="none" style="width: 100%;" controls="controls">
    <source type="audio/mpeg" src="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3?_=1"/>
    <a href="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3">https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3</a>
</audio>

AMP Audio before changes in PR

<figure class="wp-block-audio">
    <amp-audio src="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3"></amp-audio>
    <figcaption>Caption</figcaption>
</figure>

<amp-audio class="wp-audio-shortcode">
    <source type="audio/mpeg" src="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3?_=1">
</amp-audio>

AMP Audio after changes in PR

<figure class="wp-block-audio">
    <amp-audio controls="" src="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3" width="auto">
        <a href="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3" fallback="">https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3</a>
        <noscript>
            <audio controls src="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3"></audio>
        </noscript>
    </amp-audio>
    <figcaption>Caption</figcaption>
</figure>

<amp-audio class="wp-audio-shortcode amp-wp-199b6f0" id="audio-87-1" preload="none" controls="controls" width="auto">
    <source type="audio/mpeg" src="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3?_=1">
    <a href="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3?_=1" fallback="">https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3?_=1</a>
    <noscript>
        <audio class="wp-audio-shortcode amp-wp-199b6f0" id="audio-87-1" preload="none" controls="controls">
            <source type="audio/mpeg" src="https://wordpressdev.lndo.site/content/uploads/2019/02/do-you-know-I-am-batman.mp3?_=1">
        </audio>
    </noscript>
</amp-audio>

Video Fallbacks

Non-AMP Video

<figure class="wp-block-video">
    <video controls src="https://wordpressdev.lndo.site/content/uploads/2019/02/stamp.mp4"></video>
</figure>

Before PR AMP Video

<figure class="wp-block-video">
    <amp-video controls="" src="https://wordpressdev.lndo.site/content/uploads/2019/02/stamp.mp4" width="404" height="720" layout="responsive"></amp-video>
</figure>

After PR AMP Video

<figure class="wp-block-video">
    <amp-video controls="" src="https://wordpressdev.lndo.site/content/uploads/2019/02/stamp.mp4" width="404" height="720" layout="responsive">
        <a href="https://wordpressdev.lndo.site/content/uploads/2019/02/stamp.mp4" fallback="">https://wordpressdev.lndo.site/content/uploads/2019/02/stamp.mp4</a>
        <noscript>
            <video controls src="https://wordpressdev.lndo.site/content/uploads/2019/02/stamp.mp4"></video>
        </noscript>
    </amp-video>
</figure>

Fixes #1832.