Template:HLSVideo

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%)
• height - Optional. Video height (default: auto)
• gateway - Optional. IPFS gateway URL (default: https://ipfs.maybelle.cryptograss.live/ipfs)

Example

<video id="hls-video-QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB" controls playsinline style="width: 100%; height: auto; background: #000;"></video> <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <script> (function() {

 var video = document.getElementById('hls-video-QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB');
 var src = 'https://ipfs.maybelle.cryptograss.live/ipfs/QmXet6QwZ7qdtDn89Kn4fzdm7LugpcmQoSzchdij4V3DLB/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 = '

HLS not supported in this browser

';

 }

})(); </script>