Autoplay videos do not autoplay when inside a content tab

[Aikohh]

Context

I'm trying to use auto-play videos as a replacement for animated GIFs/webp/APNGs for the better compression.
I am making pages that will contain multiple videos / animations, so having a user manually click on each video to start them is not a good experience.
However, it is currently impossible to auto-play videos in content tabs without additional JavaScript, when I thought it would just be a simple addition of the autoplay attribute to videos in HTML.

Bug description

When embedding a video with the autoplay attribute into a content tab, the video will not autoplay.
However, an autoplay video placed outside of a content tab will autoplay.

# Welcome to MkDocs

<video autoplay loop muted playsinline>
<source src="../ThisIsFine.mp4" type="video/mp4">
</video>

=== "This is a tab"

    <video autoplay loop muted playsinline>
    <source src="../ThisIsFine.mp4" type="video/mp4">
    </video>

Original video from: [https://www.youtube.com/watch?v=0oBx7Jg4m-o](https://www.youtube.com/watch?v=0oBx7Jg4m-o)

I believe the cause of the issue is this commit that tries to pause videos in content tabs when content tabs are hidden. However, in this case there is only one content tab and it is never hidden, so the video is not supposed be paused.

The only workarounds I know of are:

1. go back to using GIFs/webp/APNGs at the cost of much larger file sizes but will auto-play as intended, or
2. add the controls attribute get the user to click on each video to start each one (which is annoying if there are many videos), or
3. undo the change of the faulting commit using one of the methods suggested in Disabling media pause when switching content tabs. #6844

Related links

Docs:

• https://squidfunk.github.io/mkdocs-material/reference/content-tabs/
• https://squidfunk.github.io/mkdocs-material/customization/#additional-javascript

Related issues and discussions

• Add ability to auto-pause <video>s inside of content tabs #5407
• Disabling media pause when switching content tabs. #6844

Reproduction

9.6.16-autoplay-video-does-not-autoplay-in-a-content-tab.zip

Steps to reproduce

1. Extract the reproduction project (autoplay-video.zip)
2. Run mkdocs serve in the root of the project
3. Open a web browser to the served mkdocs website
4. Observe that the autoplay video outside of a content tab is autoplaying, but the autoplay video inside a content tab is not autoplaying

Browser

Firefox, Chrome, Edge

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction using the built-in info plugin.

[squidfunk]

Thanks for reporting and the excellent reproduction! Fixed in 9b1f4ef. We now don't just pause all videos, but will play them if they're visible and autoplay is set. This means that auto-pausing still works, but autoplay is respected.

[squidfunk]

Here's an example to see the different states in action.

# Welcome to MkDocs

<video autoplay loop muted playsinline>
<source src="../ThisIsFine.mp4" type="video/mp4">
</video>

=== "This is a tab"

    <video autoplay loop muted playsinline>
    <source src="../ThisIsFine.mp4" type="video/mp4">
    </video>

---

Multiple tabs autoplay

=== "This is a tab 1"

    <video autoplay loop muted playsinline>
    <source src="../ThisIsFine.mp4" type="video/mp4">
    </video>

=== "This is a tab 2"

    <video autoplay loop muted playsinline>
    <source src="../ThisIsFine.mp4" type="video/mp4">
    </video>

---

Multiple no autoplay

=== "This is a tab 1"

    <video muted controls>
    <source src="../ThisIsFine.mp4" type="video/mp4">
    </video>

=== "This is a tab 2"

    <video muted controls>
    <source src="../ThisIsFine.mp4" type="video/mp4">
    </video>

Original video from: [https://www.youtube.com/watch?v=0oBx7Jg4m-o](https://www.youtube.com/watch?v=0oBx7Jg4m-o)

[squidfunk]

If you can confirm, I issue a new release with the latest bugfixes.

[Aikohh]

If you can confirm, I issue a new release with new latest bugfixes.

I can confirm that autoplay videos are now working in content tabs with 9b1f4ef, and they do indeed pause and resume when I switch tabs and back.

Thanks for the quick resolution! I hope to see the new bugfix release soon!

[squidfunk]

Released as part of 9.6.17.