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
VisualWikitext
Create HLS video player template for IPFS-hosted videos (via create-page on MediaWiki MCP Server)
 
Add alignment and caption support (via update-page on MediaWiki MCP Server)
 
(One intermediate revision by the same user not shown)
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)
* '''height''' - Optional. Video height (default: auto)
* '''max-width''' - Optional. Maximum width (default: 800px)
* '''gateway''' - Optional. IPFS gateway URL (default: https://ipfs.maybelle.cryptograss.live/ipfs)
* '''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


=== Example ===
=== Examples ===
'''Basic:'''
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}
</noinclude><includeonly><div class="hls-video-container" style="width: {{{width|100%}}}; max-width: 800px;">
 
<video id="hls-video-{{{cid}}}" controls playsinline style="width: 100%; height: {{{height|auto}}}; background: #000;"></video>
'''Thumbnail aligned right with caption:'''
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB|thumb|align=right|width=300px|caption=Example video}}
<script>
<div style="clear:both;"></div>
(function() {
</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>
  var video = document.getElementById('hls-video-{{{cid}}}');
  var src = '{{{gateway|https://ipfs.maybelle.cryptograss.live/ipfs}}}/{{{cid}}}/master.m3u8';
 
  if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // Native HLS support (Safari)
    video.src = src;
  } else if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(video);
  } else {
    video.parentElement.innerHTML = '<p style="color: red;">HLS not supported in this browser</p>';
  }
})();
</script>
</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
Retrieved from "https://pickipedia.xyz/index.php?title=Template:HLSVideo&oldid=2057"