@w0s/button-media-same-play 3.0.0 → 3.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -45
- package/package.json +42 -42
package/README.md
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
# Simultaneous playback button for multiple audio / video
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@w0s/button-media-same-play)
|
|
4
|
-
[![Workflow status](https://github.com/SaekiTominaga/
|
|
5
|
-
|
|
6
|
-
- If you press the button during pause, the playback starts from the position with the lowest playback time.
|
|
7
|
-
- Pause if you press a button during playback.
|
|
8
|
-
- If all the target media elements has finished playing, start playing from the beginning.
|
|
9
|
-
|
|
10
|
-
## Demo
|
|
11
|
-
|
|
12
|
-
- [Demo page](https://saekitominaga.github.io/
|
|
13
|
-
|
|
14
|
-
## Examples
|
|
15
|
-
|
|
16
|
-
```HTML
|
|
17
|
-
<script type="importmap">
|
|
18
|
-
{
|
|
19
|
-
"imports": {
|
|
20
|
-
"@w0s/button-media-same-play": "..."
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
</script>
|
|
24
|
-
<script type="module">
|
|
25
|
-
import ButtonMediaSamePlay from '@w0s/button-media-same-play';
|
|
26
|
-
|
|
27
|
-
buttonMediaSamePlay(document.querySelectorAll('.js-button-media-same-play')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
|
|
28
|
-
</script>
|
|
29
|
-
|
|
30
|
-
<button type="button" class="js-button-media-same-play"
|
|
31
|
-
aria-controls="video1 video2"
|
|
32
|
-
>Simultaneous playback</button>
|
|
33
|
-
|
|
34
|
-
<video src="video.webm" controls="" id="video1"></video>
|
|
35
|
-
<video src="video.webm" controls="" id="video2"></video>
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
## HTML attributes
|
|
39
|
-
|
|
40
|
-
<dl>
|
|
41
|
-
<dt><code>type</code> [optional]</dt>
|
|
42
|
-
<dd>This attribute is not required, but it is recommended to include <code>type="button"</code>. According to <a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type">the description in the HTML specification</a>, <q cite="https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type">The missing value default and invalid value default are the <a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type-submit-state">Submit Button</a> state</q>.</dd>
|
|
43
|
-
<dt><code>aria-controls</code> [required]</dt>
|
|
44
|
-
<dd>Space separated list of one or more ID values referencing the media elements being controlled. See the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls"><code>aria-controls</code></a> attribute of WAI-ARIA for details.</dd>
|
|
45
|
-
</dl>
|
|
1
|
+
# Simultaneous playback button for multiple audio / video
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@w0s/button-media-same-play)
|
|
4
|
+
[](https://github.com/SaekiTominaga/js-library-browser/actions/workflows/button-media-same-play.yml)
|
|
5
|
+
|
|
6
|
+
- If you press the button during pause, the playback starts from the position with the lowest playback time.
|
|
7
|
+
- Pause if you press a button during playback.
|
|
8
|
+
- If all the target media elements has finished playing, start playing from the beginning.
|
|
9
|
+
|
|
10
|
+
## Demo
|
|
11
|
+
|
|
12
|
+
- [Demo page](https://saekitominaga.github.io/js-library-browser/packages/button-media-same-play/demo/)
|
|
13
|
+
|
|
14
|
+
## Examples
|
|
15
|
+
|
|
16
|
+
```HTML
|
|
17
|
+
<script type="importmap">
|
|
18
|
+
{
|
|
19
|
+
"imports": {
|
|
20
|
+
"@w0s/button-media-same-play": "..."
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
</script>
|
|
24
|
+
<script type="module">
|
|
25
|
+
import ButtonMediaSamePlay from '@w0s/button-media-same-play';
|
|
26
|
+
|
|
27
|
+
buttonMediaSamePlay(document.querySelectorAll('.js-button-media-same-play')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<button type="button" class="js-button-media-same-play"
|
|
31
|
+
aria-controls="video1 video2"
|
|
32
|
+
>Simultaneous playback</button>
|
|
33
|
+
|
|
34
|
+
<video src="video.webm" controls="" id="video1"></video>
|
|
35
|
+
<video src="video.webm" controls="" id="video2"></video>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## HTML attributes
|
|
39
|
+
|
|
40
|
+
<dl>
|
|
41
|
+
<dt><code>type</code> [optional]</dt>
|
|
42
|
+
<dd>This attribute is not required, but it is recommended to include <code>type="button"</code>. According to <a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type">the description in the HTML specification</a>, <q cite="https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type">The missing value default and invalid value default are the <a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-type-submit-state">Submit Button</a> state</q>.</dd>
|
|
43
|
+
<dt><code>aria-controls</code> [required]</dt>
|
|
44
|
+
<dd>Space separated list of one or more ID values referencing the media elements being controlled. See the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls"><code>aria-controls</code></a> attribute of WAI-ARIA for details.</dd>
|
|
45
|
+
</dl>
|
package/package.json
CHANGED
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@w0s/button-media-same-play",
|
|
3
|
-
"version": "3.0.
|
|
4
|
-
"description": "Simultaneous playback button for multiple audio / video",
|
|
5
|
-
"keywords": [],
|
|
6
|
-
"homepage": "https://github.com/SaekiTominaga/
|
|
7
|
-
"bugs": {
|
|
8
|
-
"url": "https://github.com/SaekiTominaga/
|
|
9
|
-
},
|
|
10
|
-
"license": "MIT",
|
|
11
|
-
"author": "Saeki Tominaga",
|
|
12
|
-
"files": [
|
|
13
|
-
"dist/**/*.d.ts",
|
|
14
|
-
"!dist/**/*.test.d.ts",
|
|
15
|
-
"dist/**/*.d.ts.map",
|
|
16
|
-
"!dist/**/*.test.d.ts.map",
|
|
17
|
-
"dist/**/*.js",
|
|
18
|
-
"!dist/**/*.test.js",
|
|
19
|
-
"dist/**/*.js.map",
|
|
20
|
-
"!dist/**/*.test.js.map"
|
|
21
|
-
],
|
|
22
|
-
"type": "module",
|
|
23
|
-
"main": "dist/index.js",
|
|
24
|
-
"module": "dist/index.js",
|
|
25
|
-
"types": "dist/index.d.ts",
|
|
26
|
-
"repository": {
|
|
27
|
-
"type": "git",
|
|
28
|
-
"url": "git+https://github.com/SaekiTominaga/
|
|
29
|
-
},
|
|
30
|
-
"scripts": {
|
|
31
|
-
"server": "http-server -o demo -c-1",
|
|
32
|
-
"prebuild": "rimraf dist/* -g",
|
|
33
|
-
"build": "tsc",
|
|
34
|
-
"watch": "tsc -w",
|
|
35
|
-
"lint": "eslint src/**/*.ts __tests__/**/*.js",
|
|
36
|
-
"pretest": "npm run build",
|
|
37
|
-
"test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest dist/.+\\.test\\.js -c ../../jest.config.mjs --roots packages/button-media-same-play"
|
|
38
|
-
},
|
|
39
|
-
"publishConfig": {
|
|
40
|
-
"access": "public"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@w0s/button-media-same-play",
|
|
3
|
+
"version": "3.0.1",
|
|
4
|
+
"description": "Simultaneous playback button for multiple audio / video",
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"homepage": "https://github.com/SaekiTominaga/js-library-browser#readme",
|
|
7
|
+
"bugs": {
|
|
8
|
+
"url": "https://github.com/SaekiTominaga/js-library-browser/issues"
|
|
9
|
+
},
|
|
10
|
+
"license": "MIT",
|
|
11
|
+
"author": "Saeki Tominaga",
|
|
12
|
+
"files": [
|
|
13
|
+
"dist/**/*.d.ts",
|
|
14
|
+
"!dist/**/*.test.d.ts",
|
|
15
|
+
"dist/**/*.d.ts.map",
|
|
16
|
+
"!dist/**/*.test.d.ts.map",
|
|
17
|
+
"dist/**/*.js",
|
|
18
|
+
"!dist/**/*.test.js",
|
|
19
|
+
"dist/**/*.js.map",
|
|
20
|
+
"!dist/**/*.test.js.map"
|
|
21
|
+
],
|
|
22
|
+
"type": "module",
|
|
23
|
+
"main": "dist/index.js",
|
|
24
|
+
"module": "dist/index.js",
|
|
25
|
+
"types": "dist/index.d.ts",
|
|
26
|
+
"repository": {
|
|
27
|
+
"type": "git",
|
|
28
|
+
"url": "git+https://github.com/SaekiTominaga/js-library-browser.git"
|
|
29
|
+
},
|
|
30
|
+
"scripts": {
|
|
31
|
+
"server": "http-server -o demo -c-1",
|
|
32
|
+
"prebuild": "rimraf dist/* -g",
|
|
33
|
+
"build": "tsc",
|
|
34
|
+
"watch": "tsc -w",
|
|
35
|
+
"lint": "eslint src/**/*.ts __tests__/**/*.js",
|
|
36
|
+
"pretest": "npm run build",
|
|
37
|
+
"test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest dist/.+\\.test\\.js -c ../../jest.config.mjs --roots packages/button-media-same-play"
|
|
38
|
+
},
|
|
39
|
+
"publishConfig": {
|
|
40
|
+
"access": "public"
|
|
41
|
+
}
|
|
42
|
+
}
|