voidcannon: add playtime to media player

This commit is contained in:
bignutty
2025-11-23 20:52:23 +01:00
parent 91746fd5be
commit 814826d84f
2 changed files with 12 additions and 7 deletions

View File

@@ -20,18 +20,23 @@ To modify the test document, make changes in `/src/content/articles/playground/c
The media player allows playback of YouTube videos. The media player allows playback of YouTube videos.
```html ```html
<voidcannon-media-player video-id="<youtube video ID>"></voidcannon-media-player> <voidcannon-media-player
video-id="<youtube video ID>"
video-title="Player Title"
video-author="Player Author"
video-thumbnail="Preview Image"
></voidcannon-media-player>
``` ```
<voidcannon-media-player></voidcannon-media-player> <voidcannon-media-player></voidcannon-media-player>
<voidcannon-media-player video-id="vz7Ju8dhe2c" video-title="Humility" video-author="Gorillaz" video-thumbnail="https://lh3.googleusercontent.com/GQLNVMQEtBm2ban-cVFaEJNg8X18EpG0YvqicbGba3PddFWziKXioFjSamuBT-bvkshV1zyY56NWbbcz=w96"></voidcannon-media-player> <voidcannon-media-player video-id="vz7Ju8dhe2c" video-title="Humility" video-author="Gorillaz" video-thumbnail="https://lh3.googleusercontent.com/GQLNVMQEtBm2ban-cVFaEJNg8X18EpG0YvqicbGba3PddFWziKXioFjSamuBT-bvkshV1zyY56NWbbcz=w192"></voidcannon-media-player>
<voidcannon-media-player video-id="PJ4ZnABLkSg" video-title="Get Something Out of Your Mind (feat. 荒巻勇仁)" video-author="Yaffle" video-thumbnail="https://lh3.googleusercontent.com/9Jma_0rumI18Eep_SC8P3uyfx0TX6NtgVKbFNJ8YDxu-4JKoEZjG1xnFGN8MIgHoRmLxqDTKFy6qFeg=w96"></voidcannon-media-player> <voidcannon-media-player video-id="PJ4ZnABLkSg" video-title="Get Something Out of Your Mind (feat. 荒巻勇仁)" video-author="Yaffle" video-thumbnail="https://lh3.googleusercontent.com/9Jma_0rumI18Eep_SC8P3uyfx0TX6NtgVKbFNJ8YDxu-4JKoEZjG1xnFGN8MIgHoRmLxqDTKFy6qFeg=w192"></voidcannon-media-player>
<voidcannon-media-player video-id="FFgdqhXuldQ" video-title="Blue Sky" video-author="STARKIDS" video-thumbnail="https://lh3.googleusercontent.com/bFyhsyuxSEKOD-9RFZW-IoqiJKLWO6flz-ZnPSCdqf4z9Y2i98o-W32-lDgPkty_Ed4vt0Qy9GqwLosnZw=w96"></voidcannon-media-player> <voidcannon-media-player video-id="FFgdqhXuldQ" video-title="Blue Sky" video-author="STARKIDS" video-thumbnail="https://lh3.googleusercontent.com/bFyhsyuxSEKOD-9RFZW-IoqiJKLWO6flz-ZnPSCdqf4z9Y2i98o-W32-lDgPkty_Ed4vt0Qy9GqwLosnZw=w192"></voidcannon-media-player>
<voidcannon-media-player video-id="vRdE82xYQhU" video-title="謎" video-author="ニトロプラス キラル" video-thumbnail="https://lh3.googleusercontent.com/VwvoSg6dmP_hmU8C4NvOI6Ui9pWitZ8T6JcP9b1MEM1pd1KJpvSree_qyMuu6c6nKSgD79zFlj40SiyLuw=w96"></voidcannon-media-player> <voidcannon-media-player video-id="vRdE82xYQhU" video-title="謎" video-author="ニトロプラス キラル" video-thumbnail="https://lh3.googleusercontent.com/VwvoSg6dmP_hmU8C4NvOI6Ui9pWitZ8T6JcP9b1MEM1pd1KJpvSree_qyMuu6c6nKSgD79zFlj40SiyLuw=w192"></voidcannon-media-player>
### Same Video ID as the last entry above ### Same Video ID as the last entry above
<voidcannon-media-player video-id="vRdE82xYQhU" video-title="謎" video-author="ニトロプラス キラル" video-thumbnail="https://lh3.googleusercontent.com/VwvoSg6dmP_hmU8C4NvOI6Ui9pWitZ8T6JcP9b1MEM1pd1KJpvSree_qyMuu6c6nKSgD79zFlj40SiyLuw=w96"></voidcannon-media-player> <voidcannon-media-player video-id="vRdE82xYQhU" video-title="謎" video-author="ニトロプラス キラル" video-thumbnail="https://lh3.googleusercontent.com/VwvoSg6dmP_hmU8C4NvOI6Ui9pWitZ8T6JcP9b1MEM1pd1KJpvSree_qyMuu6c6nKSgD79zFlj40SiyLuw=w192"></voidcannon-media-player>
## Custom Elements ## Custom Elements