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
Newer edit →
VisualWikitext
Create HLS video player template for IPFS-hosted videos (via create-page on MediaWiki MCP Server)
 
Simplify template to use Common.js gadget instead of inline scripts (via update-page on MediaWiki MCP Server)
Line 9: Line 9:
* '''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%)
* '''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)


=== Example ===
=== Example ===
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}
{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}
</noinclude><includeonly><div class="hls-video-container" style="width: {{{width|100%}}}; max-width: 800px;">
</noinclude><includeonly><div class="hls-video-player" data-cid="{{{cid}}}" data-width="{{{width|100%}}}" data-max-width="{{{max-width|800px}}}"></div></includeonly>
<video id="hls-video-{{{cid}}}" controls playsinline style="width: 100%; height: {{{height|auto}}}; background: #000;"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
(function() {
  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>

Revision as of 23:07, 19 February 2026

HLS Video Player

Embeds an HLS video from IPFS using hls.js.

Usage

{{HLSVideo|cid=QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB}}

Parameters

  • cid - Required. The IPFS CID containing the HLS directory (must have master.m3u8)
  • width - Optional. Video width (default: 100%)
  • max-width - Optional. Maximum width (default: 800px)

Example

Retrieved from "https://pickipedia.xyz/index.php?title=Template:HLSVideo&oldid=2053"