Skip to content

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

Merged
westonruter merged 13 commits intodevelopfrom
add/img-noscript-fallback
Feb 18, 2019
Merged

Add noscript fallbacks for img, audio, and video; improve audio conversion to amp-audio; add AMP [fallback] for amp-audio/amp-video#1861
westonruter merged 13 commits intodevelopfrom
add/img-noscript-fallback

Conversation

@westonruter
Copy link
Copy Markdown
Member

@westonruter westonruter commented Feb 11, 2019 •
edited
Loading

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

image

<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

image

<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

image

<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.

@googlebot googlebot added the cla: yes Signed the Google CLA label Feb 11, 2019
@westonruter westonruter mentioned this pull request Feb 11, 2019
Closed
@westonruter westonruter added this to the v1.1 milestone Feb 11, 2019
westonruter
westonruter commented Feb 11, 2019
View reviewed changes
@westonruter westonruter changed the title [WIP] Append original img to amp-img under noscript for no-JS browsers Append original img to amp-img under noscript for no-JS browsers Feb 13, 2019
@westonruter westonruter changed the title Append original img to amp-img under noscript for no-JS browsers Add noscript fallbacks for img, audio, and video; improve audio conversion to amp-audio Feb 15, 2019
@westonruter westonruter changed the title Add noscript fallbacks for img, audio, and video; improve audio conversion to amp-audio Add noscript fallbacks for img, audio, and video; improve audio conversion to amp-audio; add AMP [fallback] for amp-audio/amp-video Feb 15, 2019
@westonruter westonruter merged commit bc59039 into develop Feb 18, 2019
@westonruter westonruter deleted the add/img-noscript-fallback branch February 18, 2019 17:12
@westonruter westonruter mentioned this pull request Feb 28, 2019
Merged
This was referenced Apr 2, 2019
Merged
Merged
@westonruter westonruter mentioned this pull request Apr 11, 2019
Merged
4 tasks
@westonruter westonruter mentioned this pull request Aug 13, 2019
Closed
This was referenced Aug 13, 2019
Closed
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@swissspidy swissspidy swissspidy approved these changes

Assignees

No one assigned

Labels

cla: yes Signed the Google CLA

Projects

None yet

Milestone

v1.1

Development

Successfully merging this pull request may close these issues.

3 participants

@westonruter @swissspidy @googlebot