Ver código fonte

Update the Add-Ons page

customisations
alemart 6 meses atrás
pai
commit
06c79e9e52
3 arquivos alterados com 14 adições e 11 exclusões
  1. 3
    3
      docs/addons/ar-video-player.md
  2. 10
    7
      docs/addons/index.md
  3. 1
    1
      mkdocs.yml

+ 3
- 3
docs/addons/ar-video-player.md Ver arquivo

1
 # Video Player
1
 # Video Player
2
 
2
 
3
-An A-Frame component and primitive for playing videos in AR. `<ar-video-player>` is tailored for encantar.js. Unlike A-Frame's standard `<a-video>`, `<ar-video-player>` handles corner cases for AR and includes easy-to-use controls, so you can focus on creating and designing your projects rather than dealing with the various technicalities of video playback in the browser.
3
+An A-Frame component and primitive for playing videos in AR. `<ar-video-player>` is tailored for encantar.js. Unlike A-Frame's standard `<a-video>`, `<ar-video-player>` handles corner cases for AR and includes easy-to-use controls, so you can focus on creating your projects rather than dealing with the various technicalities and quirks of video playback in the browser.
4
 
4
 
5
 !!! tip "It's easy to use!"
5
 !!! tip "It's easy to use!"
6
 
6
 
85
 
85
 
86
 ## Multiple videos
86
 ## Multiple videos
87
 
87
 
88
-You may want to play different videos depending on the target that is being tracked. This can be accomplished by setting an `<ar-video-player-source>` for each reference image as in the example below:
88
+You may play different videos depending on the target that is being tracked. This can be accomplished by setting an `<ar-video-player-source>` for each reference image as in the example below:
89
 
89
 
90
 ```html
90
 ```html
91
 <ar-root>
91
 <ar-root>
206
 
206
 
207
 * Usage of the [autoplay](#properties) setting on `<ar-video-player>` should be accompanied by a `muted` attribute on the `<video>` tag. If the page receives no user interaction, then you may only play your video automatically if it's muted.
207
 * Usage of the [autoplay](#properties) setting on `<ar-video-player>` should be accompanied by a `muted` attribute on the `<video>` tag. If the page receives no user interaction, then you may only play your video automatically if it's muted.
208
 * Usage of the `autoplay` attribute on the `<video>` tag is discouraged. Video playback may be blocked. In addition, the Video Player will not show up in AR at the exact moment the page is loaded.
208
 * Usage of the `autoplay` attribute on the `<video>` tag is discouraged. Video playback may be blocked. In addition, the Video Player will not show up in AR at the exact moment the page is loaded.
209
-* Ponder whether or not playing an initially muted video makes sense for your project. It may be better to wait for user input in order to initiate the playback, e.g., have the user click on a play button. If you decide to use autoplay, have a unmute button nearby.
209
+* Ponder whether or not playing an initially muted video makes sense for your project. It may be better to wait for user input in order to initiate the playback, e.g., have the user click on a play button. If you decide to use autoplay, have a [unmute button](#video-controls) nearby.
210
 
210
 
211
 *Example*
211
 *Example*
212
 
212
 

+ 10
- 7
docs/addons/index.md Ver arquivo

3
 Add-Ons provide an enriched experience with additional features that enhance the core of encantar.js. They're offered to supporters who purchase the various demos. Become a supporter and get exclusive access to these features!
3
 Add-Ons provide an enriched experience with additional features that enhance the core of encantar.js. They're offered to supporters who purchase the various demos. Become a supporter and get exclusive access to these features!
4
 
4
 
5
 <style>
5
 <style>
6
-.addon-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 4em 0; }
6
+.addon-container { margin: 4em 0; }
7
 .addon-container h2 { margin-top: 0; }
7
 .addon-container h2 { margin-top: 0; }
8
 .addon-container img { width: 100%; height: auto; }
8
 .addon-container img { width: 100%; height: auto; }
9
-.addon-container:nth-child(2n+1) > div:nth-child(2) { min-width: 426px; margin-left: 32px; }
10
-.addon-container:nth-child(2n) > div:nth-child(2) { min-width: 426px; margin-right: 32px; order: -1; }
9
+@media screen and (min-width: 768px) {
10
+  .addon-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
11
+  .addon-container:nth-child(2n+1) > div:nth-child(2) { min-width: 426px; margin-left: 32px; }
12
+  .addon-container:nth-child(2n) > div:nth-child(2) { min-width: 426px; margin-right: 32px; order: -1; }
13
+}
11
 </style>
14
 </style>
12
 
15
 
13
 <link rel="stylesheet" href="../style/lite-yt-embed.css">
16
 <link rel="stylesheet" href="../style/lite-yt-embed.css">
20
 
23
 
21
 Enchant your audience using this [easy-to-use &amp; customizable](./ar-video-player.md) Video Player! Videos in AR are suitable for: product marketing, AR business cards, educational materials, interactive art, and more!
24
 Enchant your audience using this [easy-to-use &amp; customizable](./ar-video-player.md) Video Player! Videos in AR are suitable for: product marketing, AR business cards, educational materials, interactive art, and more!
22
 
25
 
23
-[I want this!](https://ko-fi.com/s/697a184728){ .md-button ._blank }
26
+<a href="https://ko-fi.com/s/697a184728" target="_blank" rel="external" class="md-button" id="addon-want-video-player" data-goatcounter-click>I want this!</a>
24
 
27
 
25
   </div>
28
   </div>
26
   <div>
29
   <div>
35
 
38
 
36
 Add interactivity to your scenes with easy-to-use buttons for AR! You can [customize their images and colors](./ar-button.md). They're bundled with the Video Player.
39
 Add interactivity to your scenes with easy-to-use buttons for AR! You can [customize their images and colors](./ar-button.md). They're bundled with the Video Player.
37
 
40
 
38
-[I want this!](https://ko-fi.com/s/697a184728){ .md-button ._blank }
41
+<a href="https://ko-fi.com/s/697a184728" target="_blank" rel="external" class="md-button" id="addon-want-buttons" data-goatcounter-click>I want this!</a>
39
 
42
 
40
   </div>
43
   </div>
41
   <div markdown>
44
   <div markdown>
52
 
55
 
53
 Turn 3D and 2D objects into "clickables" that respond to touch or mouse input. AR Clickables are based on the [Pointer Tracker](../api/pointer-tracker.md). They are the building blocks of AR Buttons and are included with them.
56
 Turn 3D and 2D objects into "clickables" that respond to touch or mouse input. AR Clickables are based on the [Pointer Tracker](../api/pointer-tracker.md). They are the building blocks of AR Buttons and are included with them.
54
 
57
 
55
-[I want this!](https://ko-fi.com/s/697a184728){ .md-button ._blank }
58
+<a href="https://ko-fi.com/s/697a184728" target="_blank" rel="external" class="md-button" id="addon-want-clickables" data-goatcounter-click>I want this!</a>
56
 
59
 
57
   </div>
60
   </div>
58
   <div markdown>
61
   <div markdown>
69
 
72
 
70
 Framework-agnostic solution for preloading assets such as: 3D models, video clips, audio files and more. This Add-On is bundled with the core.
73
 Framework-agnostic solution for preloading assets such as: 3D models, video clips, audio files and more. This Add-On is bundled with the core.
71
 
74
 
72
-[I want this!](https://ko-fi.com/s/3ee4182cb6){ .md-button ._blank }
75
+<a href="https://ko-fi.com/s/3ee4182cb6" target="_blank" rel="external" class="md-button" id="addon-want-asset-manager" data-goatcounter-click>I want this!</a>
73
 
76
 
74
   </div>
77
   </div>
75
   <div markdown>
78
   <div markdown>

+ 1
- 1
mkdocs.yml Ver arquivo

60
   - 'Download': 'download.md'
60
   - 'Download': 'download.md'
61
   - 'Demos': 'demos.md'
61
   - 'Demos': 'demos.md'
62
   - 'Add-Ons':
62
   - 'Add-Ons':
63
-    - 'Introduction': 'addons/index.md'
63
+    - 'Add-Ons': 'addons/index.md'
64
     - 'AR Button API': 'addons/ar-button.md'
64
     - 'AR Button API': 'addons/ar-button.md'
65
     - 'AR Clickable API': 'addons/ar-clickable.md'
65
     - 'AR Clickable API': 'addons/ar-clickable.md'
66
     - 'Video Player API': 'addons/ar-video-player.md'
66
     - 'Video Player API': 'addons/ar-video-player.md'

Carregando…
Cancelar
Salvar