Add GitHub releases and instructions for manual usage

[Redrocirt]

For people that don't know or want to use NPM/CDN, it would be great to have downloadable releases and to have install instructions for a manual setup in the documentation, like:

• Download the X-folder from GitHub
• Copy the files to your webserver (eg. with SFTP)
• Add the CSS links in the header of your HTML document
• Add the script tag to the (minified) js file at the end of your HTML body
• Add or change attributes of the audio/video tags...

[AgentSmith0]

@Redrocirt Currently I am downloading the files from here: https://www.jsdelivr.com/package/npm/vidstack?tab=files&version=1.10.9 You can host the files on your server or use it offline... Another way to get these files is to build the package using pnpm.

[AgentSmith0]

@mihar-22 It would also be nice if you could submit vidstack to cdnjs (https://github.com/cdnjs/packages)...

[Redrocirt]

I'm still hoping for an easy way to integrate the player without having to learn how to use a framework, and with self-hosted files (because of GDPR and the player can be used for offline projects as well)...

// EDIT:

I managed to get the player working offline in a basic HTML page. As suggested by @AgentSmith0 I downloaded the files from the CND and changed some URLs within the files.

1. Download vidstack's "player" package's "cdn" folder from jsdelivr and copy the content of the 'package' folder to your project, eg. in a subfolder '/vidstack/player/'

2. Download vidstack's "media-captions" package from jsdelivr and copy the content of 'package/dist/' to your project, eg. in a subfolder '/vidstack/captions/'. The subfolders '/dev/' and '/types/' are not required and can be deleted. The file 'dev.js' can also be deleted. There are no other changes required in the copied files.

3. Download vidstack's "media-icons" package from jsdelivr and copy the content of 'package/dist/' to your project, eg. in a subfolder '/vidstack/icons/'. The subfolders '/server/' and '/types/' are not required and can be deleted. There are no other changes required in the copied files.

4. If you want to use dash.js download the minified file from either the dash.js.Github page or jsdelivr. In case of jsdelivr: Copy the content of 'package/dist/' to your project, eg. in a subfolder '/vidstack/dashjs/'. Only the files beginning with dash.all.* are required. There are no other changes required in the copied files.

5. Same procedure for hls.js if you want to use that.

6. Back to the files that were copied in step 1: In the file 'player.js' search and replace: https://cdn.jsdelivr.net/npm/@vidstack/[email protected]/chunks/ --> ./chunks/ https://cdn.vidstack.io/icons --> ../icons/cdn.js

7. In the /vidstack/player/chunks/ folder check all files, search and replace: https://cdn.vidstack.io/icons --> ../../icons/cdn.js https://cdn.vidstack.io/captions --> ../../captions/prod.js

8. If you want to use dash.js: In the /vidstack/player/providers/ folder check the three dash files, search and replace: J="https://cdn.jsdelivr.net"; --> J=""; this.oa=${J}/npm/[email protected]/dist/dash.all.min.js --> this.oa=${J}/vidstack/dashjs/dash.all.min.js (change the last path according to your copied files)

9. Same procedure with the hls.js files if you want to use that.

10. In the header of your html page add the paths to your local files:

<link rel="stylesheet" href="vidstack/player/styles/player/default/theme.css" />
<link rel="stylesheet" href="vidstack/player/styles/player/default/layouts/video.css" />
<script src="vidstack/player/player.js" type="module"></script>

11. In the body of your html page add the player and modify it according to your needs, eg...

<media-player playsinline title="video title" src="/path/to/your/video/folder/dashvideo.mpd" stream-type="on-demand" aspectRatio="16/9" load="visible" posterLoad="visible">
  <media-provider>
    <media-poster class="vds-poster" src="/path/to/your/video/folder/poster.jpg" alt="image description"></media-poster>
  </media-provider>
  <media-video-layout thumbnails="/path/to/your/video/folder/sprite/thumbnails.vtt" color-scheme="dark"></media-video-layout>
</media-player>

@AgentSmith0

Another way to get these files is to build the package using pnpm.

I would appreciate it if you could provide a simplified step-by-step guide how this is done for noobs like me that are not familiar with stack development with node.js, npm etc.

[alxndr-w]

I totally agree with @Redrocirt

That's what would have safed me hours of failing.