Add muted tags and prevent autoplay for videos (#81)

This commit is contained in:
Simon M 2019-10-07 01:00:53 +02:00 committed by arkon
parent 3e2ab22031
commit ca09d4e543
4 changed files with 30 additions and 29 deletions

View File

@ -38,7 +38,7 @@ When installing your first extension and are prompted that your phone isn't allo
<figure class="centered">
<h4>Android 8.0 and higher</h4>
<p>In newer versions of Android you need to enable "Install unknown apps" by a per-app basis.</p>
<video :poster="$withBase('/assets/media/video-guide-unknownsources-android10.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<video muted loop controls :poster="$withBase('/assets/media/video-guide-unknownsources-android10.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-unknownsources-android10.webm')" type="video/webm" />
</video>
</figure>
@ -47,7 +47,7 @@ When installing your first extension and are prompted that your phone isn't allo
<figure class="centered">
<h4>Android 7.1 and lower</h4>
<p>In older versions of Android you only need to enable "Unknown sources" globally.</p>
<video :poster="$withBase('/assets/media/video-guide-unknownsources-android711.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<video muted loop controls :poster="$withBase('/assets/media/video-guide-unknownsources-android711.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-unknownsources-android711.webm')" type="video/webm" />
</video>
</figure>
@ -137,15 +137,10 @@ If you're not getting any results when searching MangaDex then you need to log i
To enter the **WebView** go to **[<MaterialIcon icon-name="explore"/> Catalogues](/help/guides/catalogues)** → **[Browse](/help/guides/catalogues/#browse)**/**[Latest](/help/guides/catalogues/#latest)** next to **MangaDex**, open any manga from the list and then press the **<MaterialIcon icon-name="more_vert"/> Overflow menu** in the top-right corner and then press **Open in web view**.
:::
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video autoplay crossorigin="use-credentials" height="534"
intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
playsinline="playsinline" :poster="$withBase('/assets/media/logintomangadex.png')"
preload="none" width="300">
<source :src="$withBase('/assets/media/logintomangadex.webm')" type="video/webm" />
<source :src="$withBase('/assets/media/logintomangadex.mp4')" type="video/mp4" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-mangadex-no-results.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-mangadex-no-results.webm')" type="video/webm"/>
</video>
</figure>
:::

View File

@ -9,20 +9,22 @@ This category of settings allows you to setup a backup and restore mechanism for
## Create backup
Create backup lets you backup your library (titles, categories, read chapters), tracking settings, and reading history. This setting will bring up a dialog letting you choose what to backup. Manga is greyed out because it will always be backed up.
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-backup-create.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-backup-create.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-backup-create.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-backup-create.webm')" type="video/webm"/>
</video>
</figure>
:::
## Restore backup
Restore backup lets you restore your previously created backup. This setting will bring up a file explorer for you. Proceed by navigating to where your stored backup is located and then select it.
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-backup-restore.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-backup-restore.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-backup-restore.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-backup-restore.webm')" type="video/webm"/>
</video>
</figure>
:::

View File

@ -13,8 +13,8 @@ To make a category, go to `My Library`, then click on the triple dots (`⋮`) on
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-category-create.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-category-create.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-category-create.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-category-create.webm')" type="video/webm"/>
</video>
</figure>
:::
@ -25,8 +25,8 @@ You can edit a Category in `My Library` > triple dots (`⋮`) > `Edit categories
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-category-edit.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-category-edit.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-category-edit.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-category-edit.webm')" type="video/webm"/>
</video>
</figure>
:::
@ -39,8 +39,8 @@ To do this, go to `My Library` > triple dots (`⋮`) > `Edit categories` then dr
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-category-reorder.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-category-reorder.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-category-reorder.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-category-reorder.webm')" type="video/webm"/>
</video>
</figure>
:::
@ -51,8 +51,8 @@ You can delete a Category in `My Library` > triple dots (`⋮`) > `Edit categori
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-category-delete.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-category-delete.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-category-delete.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-category-delete.webm')" type="video/webm"/>
</video>
</figure>
:::
@ -66,8 +66,8 @@ You can also add Manga to multiple Categories by selecting the categories you wa
:::
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-category-add-to.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-category-add-to.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-category-add-to.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-category-add-to.webm')" type="video/webm"/>
</video>
</figure>
:::
@ -80,8 +80,8 @@ You can move a Manga to multiple Categories by selecting the categories you want
:::
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-category-remove-from.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-category-remove-from.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-category-remove-from.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-category-remove-from.webm')" type="video/webm"/>
</video>
</figure>
:::

View File

@ -32,11 +32,13 @@ Press the `Install` button and accept the installation prompt that will be shown
If you're getting stopped by a security prompt and don't know what to do you can read this FAQ section: ["How do I allow third-party installations?"](/help/faq/extensions/#how-do-i-allow-third-party-installations).
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-extension-install.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-extension-install.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-extension-install.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-extension-install.webm')" type="video/webm"/>
</video>
</figure>
:::
## Adding manga to your library
@ -48,8 +50,10 @@ Now that you've found manga that you want to add to your library, click on it an
It should now appear in your `My Library` tab, ready to be read!
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered">
<video :poster="$withBase('/assets/media/video-guide-library-add-to.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline" >
<source :src="$withBase('/assets/media/video-guide-library-add-to.webm')" type="video/webm" />
<video muted loop controls :poster="$withBase('/assets/media/video-guide-library-add-to.png')" height="500" controlslist="nodownload noremoteplayback" preload="none" loading="lazy" crossorigin="use-credentials">
<source :src="$withBase('/assets/media/video-guide-library-add-to.webm')" type="video/webm"/>
</video>
</figure>
:::