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 alignment and caption support (via update-page on MediaWiki MCP Server) |
Add semantic link to Release:{cid} for backlink tracking from Release pages (via update-page on MediaWiki MCP Server) |
||
| Line 16: | Line 16: | ||
* '''thumb''' - Optional. If present, uses thumbnail styling with border | * '''thumb''' - Optional. If present, uses thumbnail styling with border | ||
* '''caption''' - Optional. Caption text shown below the video | * '''caption''' - Optional. Caption text shown below the video | ||
=== 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. | |||
=== Examples === | === Examples === | ||
| Line 24: | Line 27: | ||
{{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>}}</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}}}" 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> | ||
Latest revision as of 15:38, 8 March 2026
HLS Video Player
Embeds an HLS video from IPFS using hls.js.
Usage
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}
With thumbnail style and caption:
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|thumb|align=right|width=300px|caption=My video description}}
Parameters
- cid - Required. The IPFS CID containing the HLS directory (must have master.m3u8)
- 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.
Examples
Basic:
Thumbnail aligned right with caption:
Example video
