PREVIEW ENVIRONMENT - This is not the production database. Changes will NOT be saved.
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
Simplify template to use Common.js gadget instead of inline scripts (via update-page on MediaWiki MCP Server) |
Add alignment and caption support (via update-page on MediaWiki MCP Server) |
||
| Line 5: | Line 5: | ||
=== Usage === | === Usage === | ||
<pre>{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}</pre> | <pre>{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}</pre> | ||
With thumbnail style and caption: | |||
<pre>{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|thumb|align=right|width=300px|caption=My video description}}</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) | ||
* '''width''' - Optional. Video width (default: 100%) | * '''width''' - Optional. Video width (default: 100%, or 300px if thumb) | ||
* '''max-width''' - Optional. Maximum width (default: 800px) | * '''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 | |||
=== | === Examples === | ||
'''Basic:''' | |||
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}} | {{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}} | ||
</noinclude><includeonly><div class="hls-video-player" data-cid="{{{cid}}}" data-width="{{{width|100%}}}" data-max-width="{{{max-width|800px}}}"></div></includeonly> | |||
'''Thumbnail aligned right with caption:''' | |||
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|thumb|align=right|width=300px|caption=Example video}} | |||
<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> | |||
Latest revision as of 03:35, 20 February 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
Examples
Basic:
Thumbnail aligned right with caption:
Example video
