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"> <figure class="centered">
<h4>Android 8.0 and higher</h4> <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> <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" /> <source :src="$withBase('/assets/media/video-guide-unknownsources-android10.webm')" type="video/webm" />
</video> </video>
</figure> </figure>
@ -47,7 +47,7 @@ When installing your first extension and are prompted that your phone isn't allo
<figure class="centered"> <figure class="centered">
<h4>Android 7.1 and lower</h4> <h4>Android 7.1 and lower</h4>
<p>In older versions of Android you only need to enable "Unknown sources" globally.</p> <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" /> <source :src="$withBase('/assets/media/video-guide-unknownsources-android711.webm')" type="video/webm" />
</video> </video>
</figure> </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**. 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> ::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <figure class="centered">
<video autoplay crossorigin="use-credentials" height="534" <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">
intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted" <source :src="$withBase('/assets/media/video-guide-mangadex-no-results.webm')" type="video/webm"/>
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> </video>
</figure> </figure>
::: :::

View File

@ -9,9 +9,10 @@ This category of settings allows you to setup a backup and restore mechanism for
## Create backup ## 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. 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> ::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-backup-create.webm')" type="video/webm"/>
</video> </video>
</figure> </figure>
@ -19,9 +20,10 @@ Create backup lets you backup your library (titles, categories, read chapters),
## Restore backup ## 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. 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> ::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-backup-restore.webm')" type="video/webm"/>
</video> </video>
</figure> </figure>

View File

@ -13,7 +13,7 @@ To make a category, go to `My Library`, then click on the triple dots (`⋮`) on
::: expander <strong>Click to reveal video guide!</strong> ::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-category-create.webm')" type="video/webm"/>
</video> </video>
</figure> </figure>
@ -25,7 +25,7 @@ You can edit a Category in `My Library` > triple dots (`⋮`) > `Edit categories
::: expander <strong>Click to reveal video guide!</strong> ::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-category-edit.webm')" type="video/webm"/>
</video> </video>
</figure> </figure>
@ -39,7 +39,7 @@ To do this, go to `My Library` > triple dots (`⋮`) > `Edit categories` then dr
::: expander <strong>Click to reveal video guide!</strong> ::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-category-reorder.webm')" type="video/webm"/>
</video> </video>
</figure> </figure>
@ -51,7 +51,7 @@ You can delete a Category in `My Library` > triple dots (`⋮`) > `Edit categori
::: expander <strong>Click to reveal video guide!</strong> ::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-category-delete.webm')" type="video/webm"/>
</video> </video>
</figure> </figure>
@ -66,7 +66,7 @@ You can also add Manga to multiple Categories by selecting the categories you wa
::: :::
::: expander <strong>Click to reveal video guide!</strong> ::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-category-add-to.webm')" type="video/webm"/>
</video> </video>
</figure> </figure>
@ -80,7 +80,7 @@ You can move a Manga to multiple Categories by selecting the categories you want
::: :::
::: expander <strong>Click to reveal video guide!</strong> ::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-category-remove-from.webm')" type="video/webm"/>
</video> </video>
</figure> </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). 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"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-extension-install.webm')" type="video/webm"/>
</video> </video>
</figure> </figure>
:::
## Adding manga to your library ## 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! It should now appear in your `My Library` tab, ready to be read!
::: expander <strong>Click to reveal video guide!</strong>
<figure class="centered"> <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" > <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"/> <source :src="$withBase('/assets/media/video-guide-library-add-to.webm')" type="video/webm"/>
</video> </video>
</figure> </figure>
:::