- Notifications
You must be signed in to change notification settings - Fork14
Flexible and easy Dash/HLS/DRM integration for HTML5 video.
License
NotificationsYou must be signed in to change notification settings
tuhinpal/tplayer.js
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This project is made possible withPlyr,Hls.js,Dash.js.
- HLS and DASH playback 🎥
- Multi quality supported 🎬
- Drm with custom header support (Widevine & Playready) 🔐
- Customizable UI ⛏
- Active development 🧱
tplayer.js requires avideo element in the DOM.
Put the tplayer.js script tag in the
<head>of your HTML document.<scriptsrc="https://cdn.jsdelivr.net/npm/tplayer.js@1.1.0/dist/index.js"></script>
Put the video element in the
<body>of your HTML document.<videoid="tplayer"></video>
Add some JS to the
<body>of your HTML document.<script>window.tplayer(options);</script>
You need to importtplayer.js into a component which will be dynamically imported (No SSR) to your root.
# 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}/>;}
| Name | Description | Default / Requirement / Fallback | Example |
|---|---|---|---|
| id | This is thetplayer.js instance id | Default: tplayer | 'tplayerhtml' |
| playerElem | Video element from DOM | Required | document.getElementById("tplayer") |
| source | Source Object | At least one DASH or HLS URL is required | {dash:'some.mpd', hls: 'some.m3u8'} |
| source.dash | MPD URL of your source file | Required if DRM enabled | https://some.mpd |
| source.hls | M3U8 URL of your source file | Not required if Dash is provided | https://some.m3u8 |
| sourceHeaders.dash | Additional XHR headers for Dash | Optional | {"some": "header"} |
| sourceHeaders.hls | Additional XHR headers for hls | Optional | {"some": "header"} |
| drm | DRM Object | Optional | {widevine: {url: '', headers: {}}, playready: {url: '', headers: {}}} |
| drm.widevine | Widevine Object | Optional | widevine: {url: '', headers: {}} |
| drm.widevine.url | Widevine license URL | Required | https://some/proxy |
| drm.widevine.headers | Headers object for license requests | Optional | {"T-Header-One": "Hi", "T-Header-Two": "Hello"} |
| drm.playready | Playready Object | Optional | playready: {url: '', headers: {}} |
| drm.playready.url | Playready license URL | Required | https://some.asmx |
| drm.playready.headers | Headers object for license requests | Optional | {"T-Header-One": "Hi", "T-Header-Two": "Hello"} |
| ui | Extended UI Object | Optional | {mainColor: '#ff002b'} |
| ui.mainColor | Main color | Optional | #ff002b |
| captions | WebVTT Captions array | Optional | [{label: "", src: "", language: ""}] |
| captions[index].label | Caption label | Optional | "English" |
| captions[index].src | Caption source URL | Required | https://some.vtt |
| captions[index].language | Caption language | Optional | "en" |
See this example
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",},],};
It will destroy the player instance. Id will be same as the id of the player instance.
destroyPlayer({id:"tplayer"});
It will return the player instance. Id will be same as the id of the player instance. You can apply additional controls to the player instance.
letplayer=getPlayer({id:"tplayer"});player.pause();
tplayer.js is licensed under theMIT license
Crafted with 💖 byTuhin Kanti Pal in 1 day.
About
Flexible and easy Dash/HLS/DRM integration for HTML5 video.