Template:HLSVideo: Difference between revisions
From PickiPedia: A knowledge base of bluegrass, old time psychedelic jams, and other public domain music
Jump to navigationJump to search
Add semantic link to Release:{cid} for backlink tracking from Release pages (via update-page on MediaWiki MCP Server) |
Add t= parameter so a video can be embedded starting at a given moment (via update-page on MediaWiki MCP Server) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 4: | Line 4: | ||
=== Usage === | === Usage === | ||
<pre>{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}</pre> | Either positional or named CID parameter works: | ||
<pre>{{HLSVideo|QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}} | |||
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}</pre> | |||
With thumbnail style and caption: | With thumbnail style and caption: | ||
<pre>{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|thumb|align=right|width=300px|caption=My video description}}</pre> | <pre>{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|thumb|align=right|width=300px|caption=My video description}}</pre> | ||
Starting at a particular moment: | |||
<pre>{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|t=14:32}}</pre> | |||
=== Parameters === | === Parameters === | ||
* '''cid''' - Required. The IPFS CID containing the HLS directory (must have master.m3u8) | * '''cid''' - Required. The IPFS CID containing the HLS directory (must have master.m3u8). Accepts positional ('''1''') or named ('''cid=''') form. | ||
* '''t''' - Optional. Where to start playback. Accepts <code>14:32</code>, <code>1:02:03</code>, or a raw number of seconds. The video loads paused on that frame rather than autoplaying. A value past the end of the video lands on the last frame; an unparseable value starts at the beginning. | |||
* '''width''' - Optional. Video width (default: 100%, or 300px if thumb) | * '''width''' - Optional. Video width (default: 100%, or 300px if thumb) | ||
* '''max-width''' - Optional. Maximum width (default: 800px) | * '''max-width''' - Optional. Maximum width (default: 800px) | ||
| Line 19: | Line 25: | ||
=== Semantic tagging === | === Semantic tagging === | ||
This template automatically creates a hidden link to the corresponding <code>Release:</code> page for the CID, enabling reverse lookups from Release pages to see where videos are used. | This template automatically creates a hidden link to the corresponding <code>Release:</code> page for the CID, enabling reverse lookups from Release pages to see where videos are used. | ||
=== Citing a moment === | |||
For citing the specific second at which a fact is asserted on video, prefer [[Template:Src]], which records the citation as queryable structured data as well as rendering a link. Use <code>t=</code> here when you want the player itself embedded at that moment. | |||
=== Examples === | === Examples === | ||
'''Basic:''' | '''Basic:''' | ||
{{HLSVideo| | {{HLSVideo|QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}} | ||
'''Thumbnail aligned right with caption:''' | '''Thumbnail aligned right with caption:''' | ||
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|thumb|align=right|width=300px|caption=Example video}} | {{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|thumb|align=right|width=300px|caption=Example video}} | ||
<div style="clear:both;"></div> | <div style="clear:both;"></div> | ||
</noinclude><includeonly>{{#if:{{{thumb|}}}|<div class="thumb t{{{align|right}}}" style="width:{{{width|300px}}};{{#ifeq:{{{align|}}}|center|margin-left:auto;margin-right:auto;|}}"><div class="thumbinner" style="width:100%;"><div class="hls-video-player" data-cid="{{{cid}}}" data-width="100%" data-max-width="{{{max-width|800px}}}"></div>{{#if:{{{caption|}}}|<div class="thumbcaption">{{{caption}}}</div>|}}</div></div>|<div style="{{#ifeq:{{{align|}}}|right|float:right;margin-left:1em;|}}{{#ifeq:{{{align|}}}|left|float:left;margin-right:1em;|}}{{#ifeq:{{{align|}}}|center|margin-left:auto;margin-right:auto;|}}width:{{{width|100%}}};max-width:{{{max-width|800px}}};"><div class="hls-video-player" data-cid="{{{cid}}}" data-width="100%" data-max-width="{{{max-width|800px}}}"></div>{{#if:{{{caption|}}}|<div style="text-align:center;font-size:0.9em;color:#666;padding:0.3em;">{{{caption}}}</div>|}}</div>}}<span style="display:none;">[[Release:{{{cid}}}]]</span></includeonly> | </noinclude><includeonly>{{#if:{{{thumb|}}}|<div class="thumb t{{{align|right}}}" style="width:{{{width|300px}}};{{#ifeq:{{{align|}}}|center|margin-left:auto;margin-right:auto;|}}"><div class="thumbinner" style="width:100%;"><div class="hls-video-player" data-cid="{{{cid|{{{1|}}}}}}" data-start="{{{t|}}}" data-width="100%" data-max-width="{{{max-width|800px}}}"></div>{{#if:{{{caption|}}}|<div class="thumbcaption">{{{caption}}}</div>|}}</div></div>|<div style="{{#ifeq:{{{align|}}}|right|float:right;margin-left:1em;|}}{{#ifeq:{{{align|}}}|left|float:left;margin-right:1em;|}}{{#ifeq:{{{align|}}}|center|margin-left:auto;margin-right:auto;|}}width:{{{width|100%}}};max-width:{{{max-width|800px}}};"><div class="hls-video-player" data-cid="{{{cid|{{{1|}}}}}}" data-start="{{{t|}}}" data-width="100%" data-max-width="{{{max-width|800px}}}"></div>{{#if:{{{caption|}}}|<div style="text-align:center;font-size:0.9em;color:#666;padding:0.3em;">{{{caption}}}</div>|}}</div>}}<span style="display:none;">[[Release:{{{cid|{{{1|}}}}}}]]</span></includeonly> | ||
Latest revision as of 22:01, 16 August 2026
HLS Video Player
Embeds an HLS video from IPFS using hls.js.
Usage
Either positional or named CID parameter works:
{{HLSVideo|QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}
With thumbnail style and caption:
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|thumb|align=right|width=300px|caption=My video description}}
Starting at a particular moment:
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|t=14:32}}
Parameters
- cid - Required. The IPFS CID containing the HLS directory (must have master.m3u8). Accepts positional (1) or named (cid=) form.
- t - Optional. Where to start playback. Accepts
14:32,1:02:03, or a raw number of seconds. The video loads paused on that frame rather than autoplaying. A value past the end of the video lands on the last frame; an unparseable value starts at the beginning. - width - Optional. Video width (default: 100%, or 300px if thumb)
- max-width - Optional. Maximum width (default: 800px)
- align - Optional. Alignment: left, right, center, none (default: none)
- thumb - Optional. If present, uses thumbnail styling with border
- caption - Optional. Caption text shown below the video
Semantic tagging
This template automatically creates a hidden link to the corresponding Release: page for the CID, enabling reverse lookups from Release pages to see where videos are used.
Citing a moment
For citing the specific second at which a fact is asserted on video, prefer Template:Src, which records the citation as queryable structured data as well as rendering a link. Use t= here when you want the player itself embedded at that moment.
Examples
Basic:
Thumbnail aligned right with caption:
Example video