Vite Vue JS Shaka Player

A simple Vue application using Vite, JavaScript and Shaka Player

This project is intended as a basic example of how to integrate Shaka Player into a Vue application using Vite and JavaScript.

Table of Contents

• Background
• Features
• Video files
• Prerequisites
• Install
• Run dev
• Build for production
• License

Background

This project was inspired by shaka-player-vuejs, but uses a more modern tech stack with Shaka Player version 4 (instead of Shaka Player version 3), Vue 3 (instead of Vue 2) and Vite (instead of Vue CLI).

Features

You can select from a list of 6 sample videos and watch the chosen video.

Video files

The manifest and image files of all sample videos used in this project are sourced from Wikimedia Commons. The original video manifests have been converted from WebM to MP4 format with FFmpeg, using this example command:

ffmpeg -i https://upload.wikimedia.org/wikipedia/commons/f/f5/Coyote_Keeping_a_Watchful_Eye.webm -c:v libx264 -profile:v main -vf format=yuv420p -c:a aac -movflags +faststart -crf 30 public/videos/TgvHMDTQENg_manifest.mp4

The converted manifest and the image of each video are stored in the videos directory.

Prerequisites

This project requires Node.js and npm to be installed locally.

Install

Install dependencies:

npm install

Run dev

Start Vite dev server:

npm run dev

Build for production

Produce application bundle:

npm run build

Preview the production build:

npm run preview

License

MIT © Gianantonio Pini