Features 📑

Setup and Usage 📚

HTML

NEXTJS

# Install tplayer.jsnpm install tplayer.js

// component\player.jsximport{useRef,useEffect}from"react";import{tplayer,destroyPlayer}from"tplayer.js";exportdefaultfunctionPlayer({ config}){constvideoRef=useRef();useEffect(()=>{tplayer({      ...config,playerElem:videoRef.current,});return()=>destroyPlayer({id:config.id});},[]);return(<div><videoref={videoRef}></video></div>);}

// pages\index.jsximportdynamicfrom"next/dynamic";constPlayer=dynamic(import("../component/player"),{ssr:false});exportdefaultfunctionHome(){return<Playerconfig={options}/>;}

Options 📝

constoptions={id:"tplayerhtml",// anythingplayerElem:document.getElementById("tplayer"),// grabbing the video element from the DOMsource:{dash:"https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/mpds/11331.mpd",hls:"https://bitmovin-a.akamaihd.net/content/art-of-motion_drm/m3u8s/11331.m3u8",},sourceHeaders:{dash:{// "T-Header": "You can send header like this",},hls:{// "T-Header": "You can send header like this",},},drm:{widevine:{url:"https://cwip-shaka-proxy.appspot.com/no_auth",// Widevine license URLheaders:{// "T-Header": "You can send header like this",},},playready:{url:"https://playready.directtaps.net/pr/svc/rightsmanager.asmx?PlayRight=1&ContentKey=EAtsIJQPd5pFiRUrV9Layw==",// Playready license URLheaders:{// "T-Header": "You can send header like this",},},},ui:{mainColor:"red",},captions:[{label:"English",src:"./test.vtt",language:"en",},],};

Methods 🔧

1. destroyPlayer({id: string})

destroyPlayer({id:"tplayer"});

2. getPlayer({id: string})

letplayer=getPlayer({id:"tplayer"});player.pause();

Credits 💖

License 📝

Crafted with 💖 byTuhin Kanti Pal in 1 day.