This commit is contained in:
username 2025-08-10 22:42:56 +08:00 committed by QDKF
commit c0dbb2c97d
350 changed files with 170456 additions and 0 deletions

View File

@ -0,0 +1,6 @@
---
type: "manual"
---
1、在接下来的每一个步骤当中请帮我实现对页面的响应式设计
2、必须严格执行我给你的指令一步一步执行不得有缩减

5
.env Normal file
View File

@ -0,0 +1,5 @@
# API配置
VITE_API_BASE_URL=http://110.42.96.65:55510/api
# Mock配置 - 禁用Mock使用真实API
VITE_ENABLE_MOCK=false

11
.env.development Normal file
View File

@ -0,0 +1,11 @@
# 开发环境配置
# API配置
VITE_API_BASE_URL=http://110.42.96.65:55510/api
# Mock配置
# 设置为 true 使用Mock数据false 使用真实API
VITE_ENABLE_MOCK=false
# 开发模式
NODE_ENV=development

66
.env.example Normal file
View File

@ -0,0 +1,66 @@
# 环境变量配置示例文件
# 复制此文件为 .env.local 并填入实际的配置值
# 应用基础配置
VITE_APP_TITLE=在线学习平台
VITE_APP_DESCRIPTION=专业的在线学习平台,提供优质的编程和技术课程
VITE_APP_VERSION=1.0.0
# API 配置
VITE_API_BASE_URL=http://localhost:3000/api
VITE_API_TIMEOUT=10000
# 开发环境配置
VITE_DEV_PORT=5173
VITE_DEV_HOST=localhost
# 生产环境配置
VITE_PROD_API_BASE_URL=https://api.yourdomain.com/api
# 第三方服务配置
# 文件上传服务
VITE_UPLOAD_BASE_URL=https://upload.yourdomain.com
VITE_CDN_BASE_URL=https://cdn.yourdomain.com
# 视频播放服务
VITE_VIDEO_BASE_URL=https://video.yourdomain.com
# 支付服务配置
VITE_ALIPAY_APP_ID=your_alipay_app_id
VITE_WECHAT_APP_ID=your_wechat_app_id
# 第三方登录配置
VITE_GITHUB_CLIENT_ID=your_github_client_id
VITE_QQ_APP_ID=your_qq_app_id
VITE_WECHAT_LOGIN_APP_ID=your_wechat_login_app_id
# 地图服务配置
VITE_MAP_API_KEY=your_map_api_key
# 统计分析配置
VITE_ANALYTICS_ID=your_analytics_id
# 错误监控配置
VITE_SENTRY_DSN=your_sentry_dsn
# 功能开关
VITE_ENABLE_MOCK=false
VITE_ENABLE_DEBUG=true
VITE_ENABLE_ANALYTICS=false
VITE_ENABLE_ERROR_TRACKING=false
# 缓存配置
VITE_CACHE_ENABLED=true
VITE_CACHE_PREFIX=study_platform_
# 安全配置
VITE_ENCRYPT_STORAGE=false
VITE_ENABLE_CSRF=true
# 主题配置
VITE_DEFAULT_THEME=light
VITE_ENABLE_DARK_MODE=true
# 语言配置
VITE_DEFAULT_LOCALE=zh-CN
VITE_ENABLE_I18N=false

10
.env.production Normal file
View File

@ -0,0 +1,10 @@
# 生产环境配置
# API配置
VITE_API_BASE_URL=http://110.42.96.65:55510/api
# Mock配置 - 生产环境禁用Mock使用真实API
VITE_ENABLE_MOCK=false
# 生产模式
NODE_ENV=production

30
.gitignore vendored Normal file
View File

@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

Binary file not shown.

After

Width:  |  Height:  |  Size: 880 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 552 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 707 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 778 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 794 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 718 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

15
Dockerfile Normal file
View File

@ -0,0 +1,15 @@
# 使用 node 构建阶段
FROM node:22 AS builder
WORKDIR /app
COPY . .
RUN npm install && npm run build
# 使用 nginx 作为生产环境
FROM nginx:stable-alpine
COPY --from=builder /app/dist /usr/share/nginx/html
# 设置静态资源的访问权限,避免 403 Forbidden
RUN find /usr/share/nginx/html -type f -exec chmod 644 {} \; \
&& find /usr/share/nginx/html -type d -exec chmod 755 {} \;
COPY nginx.conf /etc/nginx/conf.d/default.conf

62
README.md Normal file
View File

@ -0,0 +1,62 @@
# 在线学习平台
基于 Vue 3 + TypeScript + Naive UI 构建的现代化在线学习平台。
## 技术栈
- **前端框架**: Vue 3 (Composition API)
- **开发语言**: TypeScript
- **UI 组件库**: Naive UI
- **状态管理**: Pinia
- **路由管理**: Vue Router 4
- **构建工具**: Vite
- **图标库**: @vicons/ionicons5
## 功能特性
### 🎯 核心功能
- 用户注册/登录系统
- 课程浏览和搜索
- 课程详情展示
- 在线视频学习
- 学习进度跟踪
- 个人中心管理
### 📱 响应式设计
- 支持桌面端和移动端
- 自适应布局
- 优雅的用户界面
### 🔧 开发特性
- TypeScript 类型安全
- 组件化开发
- 模块化状态管理
- 热重载开发体验
## 快速开始
### 环境要求
- Node.js >= 16
- npm >= 7
### 安装依赖
```bash
npm install
```
### 启动开发服务器
```bash
npm run dev
```
访问 http://localhost:3000 查看应用
### 构建生产版本
```bash
npm run build
```
### 类型检查
```bash
npm run type-check
```

107
deploy.js Normal file
View File

@ -0,0 +1,107 @@
#!/usr/bin/env node
/**
* 部署脚本 - 自动配置环境变量和构建项目
*/
const fs = require('fs')
const path = require('path')
const { execSync } = require('child_process')
console.log('🚀 开始部署流程...')
// 检查是否有真实的API服务器
async function checkApiServer(apiUrl) {
try {
const fetch = (await import('node-fetch')).default
const response = await fetch(`${apiUrl}/health`, {
timeout: 5000,
method: 'GET'
})
return response.ok
} catch (error) {
console.log(`❌ API服务器检查失败: ${error.message}`)
return false
}
}
// 读取环境配置
function readEnvFile(filePath) {
if (!fs.existsSync(filePath)) {
return {}
}
const content = fs.readFileSync(filePath, 'utf8')
const env = {}
content.split('\n').forEach(line => {
const trimmed = line.trim()
if (trimmed && !trimmed.startsWith('#')) {
const [key, ...valueParts] = trimmed.split('=')
if (key && valueParts.length > 0) {
env[key.trim()] = valueParts.join('=').trim()
}
}
})
return env
}
// 写入环境配置
function writeEnvFile(filePath, env) {
const content = Object.entries(env)
.map(([key, value]) => `${key}=${value}`)
.join('\n')
fs.writeFileSync(filePath, content + '\n')
}
async function main() {
// 读取生产环境配置
const prodEnv = readEnvFile('.env.production')
const apiUrl = prodEnv.VITE_API_BASE_URL
if (apiUrl) {
console.log(`🔍 检查API服务器: ${apiUrl}`)
const isApiAvailable = await checkApiServer(apiUrl.replace('/api', ''))
if (isApiAvailable) {
console.log('✅ API服务器可用使用真实API')
prodEnv.VITE_ENABLE_MOCK = 'false'
} else {
console.log('❌ API服务器不可用启用Mock模式')
prodEnv.VITE_ENABLE_MOCK = 'true'
}
} else {
console.log('⚠️ 未配置API地址启用Mock模式')
prodEnv.VITE_ENABLE_MOCK = 'true'
}
// 更新生产环境配置
writeEnvFile('.env.production', prodEnv)
console.log('📝 已更新生产环境配置')
// 构建项目
console.log('🔨 开始构建项目...')
try {
execSync('npm run build', { stdio: 'inherit' })
console.log('✅ 构建完成!')
// 显示部署信息
console.log('\n📋 部署信息:')
console.log(` Mock模式: ${prodEnv.VITE_ENABLE_MOCK === 'true' ? '启用' : '禁用'}`)
if (apiUrl) {
console.log(` API地址: ${apiUrl}`)
}
console.log(' 构建文件: ./dist/')
} catch (error) {
console.error('❌ 构建失败:', error.message)
process.exit(1)
}
}
main().catch(error => {
console.error('❌ 部署失败:', error)
process.exit(1)
})

11
docker-compose.yaml Normal file
View File

@ -0,0 +1,11 @@
version: '3.8'
services:
vue-app:
build:
context: .
dockerfile: Dockerfile
ports:
- "55514:80"
container_name: vue3-nginx
restart: unless-stopped

125
docs/Activities-Page.md Normal file
View File

@ -0,0 +1,125 @@
# 活动页面 (Activities Page)
## 📋 概述
活动页面是在线学习平台的重要组成部分展示所有可用的学习活动和课程。页面设计完全按照提供的UI设计图实现包含蓝色横幅区域和活动卡片网格布局。
## 🎨 页面结构
### 1. 蓝色横幅区域 (Hero Banner)
- **背景**: 蓝色渐变背景 (#4A90E2#357ABD)
- **左侧内容**:
- 分类标签: "理工/消安/药师/中经"
- 主标题: "免费海量题库" + 橙色"小程序"标签
- 特色说明: "优质试题 | 无需下载 | 随时刷题"
- **右侧**: 插图占位区域(预留给后续图片)
- **装饰元素**: 网格背景纹理
### 2. 活动列表区域
- **标题**: "全部活动"
- **布局**: 3列网格布局响应式
- **活动卡片**: 6个相同样式的卡片
### 3. 活动卡片设计
每个卡片包含:
- **头部**: 蓝绿色渐变背景
- 年份标签: "2025"
- 课程标题: "计算机二级"
- 课程副标题: "C语言讲练综合班"
- **主体内容**:
- 特色标签: "系统备考"、"考点详解"、"题考刷题"
- 课程信息: 证书名称、开课时间、适合年级、报名人数、价格
- **底部**: 蓝色"查看详情"按钮
## 🎯 功能特性
### 1. 响应式设计
- **桌面端**: 3列网格布局
- **平板端**: 2列网格布局
- **移动端**: 1列网格布局
### 2. 交互效果
- **卡片悬停**: 阴影加深 + 向上移动
- **按钮悬停**: 颜色变化 + 轻微上移
- **加载动画**: 骨架屏效果
### 3. 动画效果
- **页面加载**: 左右滑入动画
- **卡片显示**: 渐入上移动画(错开延迟)
- **加载状态**: 闪烁骨架屏
## 🛠️ 技术实现
### 文件结构
```
src/views/Activities.vue # 活动页面主组件
src/router/index.ts # 路由配置
src/components/layout/AppHeader.vue # 导航栏更新
```
### 核心技术
- **Vue 3 Composition API**: 组件逻辑
- **TypeScript**: 类型安全
- **CSS Grid**: 响应式布局
- **CSS Animations**: 动画效果
- **Vue Router**: 路由导航
### 样式特点
- **渐变背景**: 多层次视觉效果
- **卡片设计**: 现代化卡片样式
- **颜色系统**: 蓝色主题 + 橙色点缀
- **字体层级**: 清晰的信息层次
## 🔗 导航集成
活动页面已集成到主导航栏中:
- 导航项: "活动" (带NEW标签)
- 路由路径: `/activities`
- 页面标题: "全部活动 - 在线学习平台"
## 📱 响应式断点
```css
/* 大屏幕 (>1024px) */
.activities-grid { grid-template-columns: repeat(3, 1fr); }
/* 平板 (≤1024px) */
.activities-grid { grid-template-columns: repeat(2, 1fr); }
/* 手机 (≤768px) */
.activities-grid { grid-template-columns: 1fr; }
```
## 🎨 设计规范
### 颜色规范
- **主色调**: #4A90E2 (蓝色)
- **辅助色**: #44A08D (蓝绿色)
- **强调色**: #FF6B35 (橙色)
- **文字色**: #333 (深灰)
- **次要文字**: #666 (中灰)
### 间距规范
- **容器边距**: 20px (移动端) / 30px (桌面端)
- **卡片间距**: 20px (移动端) / 30px (桌面端)
- **内容边距**: 16px-24px
### 圆角规范
- **卡片圆角**: 12px
- **按钮圆角**: 6px
- **标签圆角**: 4px
## 🚀 使用方法
1. **访问页面**: 点击导航栏"活动"或直接访问 `/activities`
2. **浏览活动**: 滚动查看所有可用活动
3. **查看详情**: 点击"查看详情"按钮(当前为演示功能)
4. **响应式体验**: 在不同设备上自动适配布局
## 📝 后续扩展
1. **图片集成**: 添加横幅插图和活动图片
2. **数据接口**: 连接后端API获取真实活动数据
3. **详情页面**: 实现活动详情页面跳转
4. **筛选功能**: 添加活动分类和筛选功能
5. **搜索功能**: 实现活动搜索功能

158
docs/Banner-Image-Setup.md Normal file
View File

@ -0,0 +1,158 @@
# 活动页面横幅图片设置指南
## 📋 概述
活动页面的横幅区域已经改为支持一整张图片的形式。目前显示占位内容,您可以按照以下步骤添加横幅图片。
## 🖼️ 当前状态
- ✅ 横幅区域已改为图片容器
- ✅ 响应式设计已适配
- ✅ 占位内容显示中
- ⏳ 等待提供横幅图片
## 📐 图片规格建议
### 推荐尺寸
- **桌面端**: 1200px × 400px
- **平板端**: 1024px × 350px
- **移动端**: 768px × 300px
### 文件格式
- **推荐**: JPG/JPEG (文件小,加载快)
- **支持**: PNG (支持透明背景)
- **支持**: WebP (现代浏览器,更小文件)
### 文件大小
- **建议**: < 500KB
- **最大**: < 1MB
## 🚀 添加图片的方法
### 方法一:直接替换(推荐)
1. **将图片文件放到项目中**
```
public/images/activities-banner.jpg
```
2. **修改 Activities.vue 文件**
```typescript
// 在 onMounted 中取消注释并设置图片路径
onMounted(() => {
setTimeout(() => {
loading.value = false
}, 800)
// 设置横幅图片路径
setBannerImage('/images/activities-banner.jpg')
})
```
### 方法二:直接设置变量
`src/views/Activities.vue` 中找到这一行:
```typescript
const bannerImageSrc = ref('')
```
改为:
```typescript
const bannerImageSrc = ref('/images/activities-banner.jpg')
```
## 📁 推荐的文件结构
```
public/
├── images/
│ ├── activities-banner.jpg # 横幅图片
│ ├── activities-banner-tablet.jpg # 平板版本(可选)
│ └── activities-banner-mobile.jpg # 移动版本(可选)
```
## 🎨 图片内容建议
根据原设计图,横幅图片应该包含:
- 蓝色渐变背景
- "理工/消安/药师/中经" 分类文字
- "免费海量题库" 主标题
- "小程序" 橙色标签
- "优质试题 | 无需下载 | 随时刷题" 特色说明
- 右侧人物和手机界面插图
## 🔧 技术实现细节
### 当前代码结构
```vue
<template>
<div class="hero-banner">
<div class="banner-image-container">
<!-- 实际图片 -->
<img
v-if="hasBannerImage"
:src="bannerImageSrc"
alt="活动横幅"
class="banner-image"
/>
<!-- 占位区域 -->
<div v-else class="banner-placeholder">
<!-- 占位内容 -->
</div>
</div>
</div>
</template>
```
### 响应式适配
- 桌面端400px 高度
- 平板端350px 高度
- 移动端300px 高度
- 小屏手机250px 高度
### CSS 样式
```css
.banner-image {
width: 100%;
height: 100%;
object-fit: cover; /* 保持比例,裁剪多余部分 */
object-position: center; /* 居中显示 */
}
```
## ⚡ 性能优化建议
1. **图片压缩**: 使用工具压缩图片文件
2. **懒加载**: 大图片可考虑懒加载
3. **多尺寸**: 为不同设备提供不同尺寸的图片
4. **WebP格式**: 现代浏览器使用WebP格式
## 🔄 更新步骤
当您准备好横幅图片时:
1. **准备图片文件**
- 确保图片符合推荐规格
- 压缩图片文件大小
2. **上传图片**
- 将图片放到 `public/images/` 目录
3. **更新代码**
- 按照上述方法一或方法二设置图片路径
4. **测试效果**
- 刷新浏览器查看效果
- 测试不同设备的显示效果
## 📞 需要帮助?
如果您在设置横幅图片时遇到任何问题,请:
1. 检查图片路径是否正确
2. 确认图片文件是否存在
3. 查看浏览器控制台是否有错误信息
4. 联系开发人员获取技术支持
---
**注意**: 当前页面显示占位内容,一旦您提供横幅图片并按照上述步骤设置,占位内容将自动被实际图片替换。

View File

@ -0,0 +1,175 @@
# 师资力量页面横幅图片设置指南
## 📋 概述
师资力量页面的横幅区域已经改为支持一整张图片的形式。目前显示占位内容,您可以按照以下步骤添加横幅图片。
## 🖼️ 当前状态
- ✅ 横幅区域已改为图片容器
- ✅ 响应式设计已适配
- ✅ 占位内容显示中
- ⏳ 等待提供横幅图片
## 📐 图片规格建议
### 推荐尺寸
- **桌面端**: 1200px × 400px
- **平板端**: 1024px × 350px
- **移动端**: 768px × 300px
- **小屏手机**: 480px × 250px
### 文件格式
- **推荐**: JPG/JPEG (文件小,加载快)
- **支持**: PNG (支持透明背景)
- **支持**: WebP (现代浏览器,更小文件)
### 文件大小
- **建议**: < 500KB
- **最大**: < 1MB
## 🚀 添加图片的方法
### 方法一:直接替换(推荐)
1. **将图片文件放到项目中**
```
public/images/faculty-banner.jpg
```
2. **修改 Faculty.vue 文件**
```typescript
// 在文件开头找到这一行
const bannerImageSrc = ref('')
// 改为
const bannerImageSrc = ref('/images/faculty-banner.jpg')
```
### 方法二:使用设置方法
`src/views/Faculty.vue` 中添加初始化代码:
```typescript
import { ref, computed, onMounted } from 'vue'
// 在组件挂载时设置图片
onMounted(() => {
setBannerImage('/images/faculty-banner.jpg')
})
```
## 📁 推荐的文件结构
```
public/
├── images/
│ ├── faculty-banner.jpg # 师资力量横幅图片
│ ├── faculty-banner-tablet.jpg # 平板版本(可选)
│ └── faculty-banner-mobile.jpg # 移动版本(可选)
```
## 🎨 图片内容建议
根据师资力量页面的特点,横幅图片应该包含:
- 专业的教育背景或学术氛围
- "师资力量"相关的标题文字
- 可能包含教师形象或教学场景
- 体现专业性和权威性的设计元素
- 与整体网站风格保持一致的色调
## 🔧 技术实现细节
### 当前代码结构
```vue
<template>
<div class="page-header">
<div class="banner-image-container">
<!-- 实际图片 -->
<img
v-if="hasBannerImage"
:src="bannerImageSrc"
alt="师资力量横幅"
class="banner-image"
/>
<!-- 占位区域 -->
<div v-else class="banner-placeholder">
<!-- 占位内容 -->
</div>
</div>
</div>
</template>
```
### 响应式适配
- **桌面端**: 400px 高度
- **平板端**: 350px 高度
- **移动端**: 300px 高度
- **小屏手机**: 250px 高度
### CSS 样式特点
```css
.banner-image {
width: 100%;
height: 100%;
object-fit: cover; /* 保持比例,裁剪多余部分 */
object-position: center; /* 居中显示 */
}
.banner-placeholder {
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
/* 蓝色渐变背景作为占位 */
}
```
## ⚡ 性能优化建议
1. **图片压缩**: 使用工具压缩图片文件
2. **适当尺寸**: 避免使用过大的图片
3. **格式选择**: 优先使用JPG格式
4. **懒加载**: 大图片可考虑懒加载
## 🔄 更新步骤
当您准备好师资力量横幅图片时:
1. **准备图片文件**
- 确保图片符合推荐规格
- 压缩图片文件大小
- 检查图片内容是否符合师资力量主题
2. **上传图片**
- 将图片放到 `public/images/` 目录
- 确保文件名清晰易懂
3. **更新代码**
- 按照上述方法设置图片路径
- 确保路径正确无误
4. **测试效果**
- 访问 `/faculty` 页面查看效果
- 测试不同设备的显示效果
- 检查图片加载速度
## 🎯 与活动页面的区别
师资力量页面与活动页面的横幅设置方法相同,但内容主题不同:
- **活动页面**: 侧重课程活动和学习资源
- **师资力量页面**: 侧重教师团队和专业实力
## 📞 需要帮助?
如果您在设置师资力量横幅图片时遇到任何问题,请:
1. 检查图片路径是否正确
2. 确认图片文件是否存在于 `public/images/` 目录
3. 查看浏览器控制台是否有错误信息
4. 确保图片格式被浏览器支持
5. 联系开发人员获取技术支持
## 🔗 相关页面
- [活动页面横幅设置指南](./Banner-Image-Setup.md)
- [师资力量页面功能说明](./Faculty-Page.md)
---
**注意**: 当前页面显示占位内容,一旦您提供师资力量横幅图片并按照上述步骤设置,占位内容将自动被实际图片替换。页面访问地址:`http://localhost:3000/faculty`

19
index.html Normal file
View File

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线学习平台</title>
<meta name="description" content="专业的在线学习平台,提供优质的编程和技术课程">
<meta name="keywords" content="在线学习,编程课程,技术培训,Vue.js,React,Node.js">
<!-- CKPlayer CSS -->
<link rel="stylesheet" href="/ckplayer/css/ckplayer.css">
<!-- CKPlayer JS -->
<script src="/ckplayer/js/ckplayer.js"></script>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

11
nginx.conf Normal file
View File

@ -0,0 +1,11 @@
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}

3602
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

33
package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "study-online-platform",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc && vite build",
"build:prod": "node deploy.js",
"type-check": "vue-tsc --noEmit",
"preview": "vite preview",
"test": "vitest",
"test:ui": "vitest --ui"
},
"dependencies": {
"@vicons/ionicons5": "^0.13.0",
"axios": "^1.11.0",
"ckplayer": "^3.1.2",
"naive-ui": "^2.42.0",
"pinia": "^3.0.3",
"vue": "^3.5.17",
"vue-i18n": "^9.14.5",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@types/node": "^24.0.15",
"@vitejs/plugin-vue": "^6.0.0",
"typescript": "^5.8.3",
"vite": "^7.0.0",
"vite-plugin-vue-devtools": "^7.7.7",
"vue-tsc": "^3.0.3"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/banners/banner1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 978 KiB

BIN
public/banners/banner6.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 788 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

202
public/ckplayer/LICENSE Normal file
View File

@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

View File

@ -0,0 +1,104 @@
flv.js [![npm](https://img.shields.io/npm/v/flv.js.svg?style=flat)](https://www.npmjs.com/package/flv.js)
======
An HTML5 Flash Video (FLV) Player written in pure JavaScript without Flash. LONG LIVE FLV!
This project relies on [Media Source Extensions][] to work.
**For FLV live stream playback, please consider [mpegts.js][] which is under active development.**
**This project will become rarely maintained.**
[mpegts.js]: https://github.com/xqq/mpegts.js
## Overview
flv.js works by transmuxing FLV file stream into ISO BMFF (Fragmented MP4) segments, followed by feeding mp4 segments into an HTML5 `<video>` element through [Media Source Extensions][] API.
[Media Source Extensions]: https://w3c.github.io/media-source/
## Demo
[http://bilibili.github.io/flv.js/demo/](http://bilibili.github.io/flv.js/demo/)
## Features
- FLV container with H.264 + AAC / MP3 codec playback
- Multipart segmented video playback
- HTTP FLV low latency live stream playback
- FLV over WebSocket live stream playback
- Compatible with Chrome, FireFox, Safari 10, IE11 and Edge
- Extremely low overhead, and hardware accelerated by your browser!
## Installation
```bash
npm install --save flv.js
```
## Build
```bash
npm ci # install dependencies / dev-dependences
npm run build:debug # debug version flv.js will be emitted to /dist
npm run build # minimized release version flv.min.js will be emitted to /dist
```
[cnpm](https://github.com/cnpm/cnpm) mirror is recommended if you are in Mainland China.
## CORS
If you use standalone video server for FLV stream, `Access-Control-Allow-Origin` header must be configured correctly on video server for cross-origin resource fetching.
See [cors.md](docs/cors.md) for more details.
## Getting Started
```html
<script src="flv.min.js"></script>
<video id="videoElement"></video>
<script>
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://example.com/flv/video.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
```
## Limitations
- MP3 audio codec is currently not working on IE11 / Edge
- HTTP FLV live stream is not currently working on all browsers, see [livestream.md](docs/livestream.md)
## Multipart playback
You only have to provide a playlist for `MediaDataSource`. See [multipart.md](docs/multipart.md)
## Livestream playback
See [livestream.md](docs/livestream.md)
## API and Configuration
See [api.md](docs/api.md)
## Debug
```bash
npm ci # install dependencies / dev-dependences
npm run dev # watch file changes and build debug version on the fly
```
## Design
See [design.md](docs/design.md)
## License
```
Copyright (C) 2016 Bilibili. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```

10585
public/ckplayer/flv.js/flv.js Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

10
public/ckplayer/flv.js/flv.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,28 @@
Copyright (c) 2017 Dailymotion (http://www.dailymotion.com)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
src/remux/mp4-generator.js and src/demux/exp-golomb.ts implementation in this project
are derived from the HLS library for video.js (https://github.com/videojs/videojs-contrib-hls)
That work is also covered by the Apache 2 License, following copyright:
Copyright (c) 2013-2015 Brightcove
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View File

@ -0,0 +1,442 @@
[![npm](https://img.shields.io/npm/v/hls.js.svg?style=flat)](https://npmjs.org/package/hls.js)
[![npm](https://img.shields.io/npm/v/hls.js/canary.svg?style=flat)](https://www.npmjs.com/package/hls.js/v/canary)
[![](https://data.jsdelivr.com/v1/package/npm/hls.js/badge?style=rounded)](https://www.jsdelivr.com/package/npm/hls.js)
[![Sauce Test Status](https://saucelabs.com/buildstatus/robwalch)](https://app.saucelabs.com/u/robwalch)
[comment]: <> ([![Sauce Test Status]&#40;https://saucelabs.com/browser-matrix/robwalch.svg&#41;]&#40;https://saucelabs.com/u/robwalch&#41;)
# ![HLS.js](https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png)
HLS.js is a JavaScript library that implements an [HTTP Live Streaming] client.
It relies on [HTML5 video][] and [MediaSource Extensions][] for playback.
It works by transmuxing MPEG-2 Transport Stream and AAC/MP3 streams into ISO BMFF (MP4) fragments.
Transmuxing is performed asynchronously using a [Web Worker] when available in the browser.
HLS.js also supports HLS + fmp4, as announced during [WWDC2016](https://developer.apple.com/videos/play/wwdc2016/504/).
HLS.js works directly on top of a standard HTML`<video>` element.
HLS.js is written in [ECMAScript6] (`*.js`) and [TypeScript] (`*.ts`) (strongly typed superset of ES6), and transpiled in ECMAScript5 using [Babel](https://babeljs.io/) and the [TypeScript compiler].
[Webpack] is used to build the distro bundle and serve the local development environment.
[html5 video]: https://www.html5rocks.com/en/tutorials/video/basics/
[mediasource extensions]: https://w3c.github.io/media-source/
[http live streaming]: https://en.wikipedia.org/wiki/HTTP_Live_Streaming
[web worker]: https://caniuse.com/#search=worker
[ecmascript6]: https://github.com/ericdouglas/ES6-Learning#articles--tutorials
[typescript]: https://www.typescriptlang.org/
[typescript compiler]: https://www.typescriptlang.org/docs/handbook/compiler-options.html
[webpack]: https://webpack.js.org/
## Features
- VOD & Live playlists
- DVR support on Live playlists
- Fragmented MP4 container
- MPEG-2 TS container
- ITU-T Rec. H.264 and ISO/IEC 14496-10 Elementary Stream
- ISO/IEC 13818-7 ADTS AAC Elementary Stream
- ISO/IEC 11172-3 / ISO/IEC 13818-3 (MPEG-1/2 Audio Layer III) Elementary Stream
- Packetized metadata (ID3v2.3.0) Elementary Stream
- AAC container (audio only streams)
- MPEG Audio container (MPEG-1/2 Audio Layer III audio only streams)
- Timed Metadata for HTTP Live Streaming (in ID3 format, carried in MPEG-2 TS)
- AES-128 decryption
- SAMPLE-AES decryption (only supported if using MPEG-2 TS container)
- Encrypted media extensions (EME) support for DRM (digital rights management)
- Widevine CDM (only tested with [shaka-packager](https://github.com/google/shaka-packager) test-stream on [the demo page](https://hls-js.netlify.app/demo/?src=https%3A%2F%2Fstorage.googleapis.com%2Fshaka-demo-assets%2Fangel-one-widevine-hls%2Fhls.m3u8&demoConfig=eyJlbmFibGVTdHJlYW1pbmciOnRydWUsImF1dG9SZWNvdmVyRXJyb3IiOnRydWUsInN0b3BPblN0YWxsIjpmYWxzZSwiZHVtcGZNUDQiOmZhbHNlLCJsZXZlbENhcHBpbmciOi0xLCJsaW1pdE1ldHJpY3MiOi0xfQ==))
- CEA-608/708 captions
- WebVTT subtitles
- Alternate Audio Track Rendition (Master Playlist with Alternative Audio) for VoD and Live playlists
- Adaptive streaming
- Manual & Auto Quality Switching
- 3 Quality Switching modes are available (controllable through API means)
- Instant switching (immediate quality switch at current video position)
- Smooth switching (quality switch for next loaded fragment)
- Bandwidth conservative switching (quality switch change for next loaded fragment, without flushing the buffer)
- In Auto-Quality mode, emergency switch down in case bandwidth is suddenly dropping to minimize buffering.
- Accurate Seeking on VoD & Live (not limited to fragment or keyframe boundary)
- Ability to seek in buffer and back buffer without redownloading segments
- Built-in Analytics
- All internal events can be monitored (Network Events, Video Events)
- Playback session metrics are also exposed
- Resilience to errors
- Retry mechanism embedded in the library
- Recovery actions can be triggered fix fatal media or network errors
- [Redundant/Failover Playlists](https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/UsingHTTPLiveStreaming/UsingHTTPLiveStreaming.html#//apple_ref/doc/uid/TP40008332-CH102-SW22)
### Supported M3U8 tags
For details on the HLS format and these tags' meanings, see https://tools.ietf.org/html/draft-pantos-hls-rfc8216bis-08
#### Manifest tags
- `#EXT-X-STREAM-INF:<attribute-list>`
`<URI>`
- `#EXT-X-MEDIA:<attribute-list>`
- `#EXT-X-SESSION-DATA:<attribute-list>`
The following properties are added to their respective variants' attribute list but are not implemented in their selection and playback.
- `VIDEO-RANGE` and `HDCP-LEVEL` (See [#2489](https://github.com/video-dev/hls.js/issues/2489))
#### Playlist tags
- `#EXTM3U`
- `#EXT-X-VERSION=<n>`
- `#EXTINF:<duration>,[<title>]`
- `#EXT-X-ENDLIST`
- `#EXT-X-MEDIA-SEQUENCE=<n>`
- `#EXT-X-TARGETDURATION=<n>`
- `#EXT-X-DISCONTINUITY`
- `#EXT-X-DISCONTINUITY-SEQUENCE=<n>`
- `#EXT-X-BYTERANGE=<n>[@<o>]`
- `#EXT-X-MAP:<attribute-list>`
- `#EXT-X-KEY:<attribute-list>` (`METHOD=SAMPLE-AES` is only supports with MPEG-2 TS segments)
- `#EXT-X-PROGRAM-DATE-TIME:<attribute-list>`
- `#EXT-X-START:TIME-OFFSET=<n>`
- `#EXT-X-SERVER-CONTROL:<attribute-list>`
- `#EXT-X-PART-INF:PART-TARGET=<n>`
- `#EXT-X-PART:<attribute-list>`
- `#EXT-X-PRELOAD-HINT:<attribute-list>`
- `#EXT-X-SKIP:<attribute-list>`
- `#EXT-X-RENDITION-REPORT:<attribute-list>`
The following tags are added to their respective fragment's attribute list but are not implemented in streaming and playback.
- `#EXT-X-DATERANGE:<attribute-list>` (Not added to metadata TextTracks. See [#2218](https://github.com/video-dev/hls.js/issues/2218))
- `#EXT-X-BITRATE` (Not used in ABR controller)
- `#EXT-X-GAP` (Not implemented. See [#2940](https://github.com/video-dev/hls.js/issues/2940))
### Not Supported
For a complete list of issues, see ["Top priorities" in the Release Planning and Backlog project tab](https://github.com/video-dev/hls.js/projects/6). Codec support is dependent on the runtime environment (for example, not all browsers on the same OS support HEVC).
- CMAF CC support [#2623](https://github.com/video-dev/hls.js/issues/2623)
- `Emsg` Inband Timed Metadata for FMP4 (ID3 within Emsgv1) in "metadata" TextTracks [#2360](https://github.com/video-dev/hls.js/issues/2360)
- `#EXT-X-DATERANGE` in "metadata" TextTracks [#2218](https://github.com/video-dev/hls.js/issues/2218)
- `#EXT-X-GAP` filling [#2940](https://github.com/video-dev/hls.js/issues/2940)
- `#EXT-X-I-FRAME-STREAM-INF` I-frame Media Playlist files
- `SAMPLE-AES` with fmp4, aac, mp3, vtt... segments (MPEG-2 TS only)
- PlayReady and FairPlay DRM ( See [#3779](https://github.com/video-dev/hls.js/issues/2360) and [issues labeled DRM](https://github.com/video-dev/hls.js/issues?q=is%3Aissue+is%3Aopen+label%3ADRM))
- Advanced variant selection based on runtime media capabilities (See issues labeled [`media-capabilities`](https://github.com/video-dev/hls.js/labels/media-capabilities))
- MP3 elementary stream audio in IE and Edge (<=18) on Windows 10 (See [#1641](https://github.com/video-dev/hls.js/issues/1641) and [Microsoft answers forum](https://answers.microsoft.com/en-us/ie/forum/all/ie11-on-windows-10-cannot-play-hls-with-mp3/2da994b5-8dec-4ae9-9201-7d138ede49d9))
### Server-side-rendering (SSR) and `require` from a Node.js runtime
You can safely require this library in Node and **absolutely nothing will happen**. A dummy object is exported so that requiring the library does not throw an error. HLS.js is not instantiable in Node.js. See [#1841](https://github.com/video-dev/hls.js/pull/1841) for more details.
## Getting started with development
First, checkout the repository and install the required dependencies
```sh
git clone https://github.com/video-dev/hls.js.git
cd hls.js
# After cloning or pulling from the repository, make sure all dependencies are up-to-date
npm install ci
# Run dev-server for demo page (recompiles on file-watch, but doesn't write to actual dist fs artifacts)
npm run dev
# After making changes run the sanity-check task to verify all checks before committing changes
npm run sanity-check
```
The dev server will host files on port 8000. Once started, the demo can be found running at http://localhost:8000/demo/.
Before submitting a PR, please see our [contribution guidelines](CONTRIBUTING.md).
Join the discussion on Slack via [video-dev.org](https://video-dev.org) in #hlsjs for updates and questions about development.
### Build tasks
Build all flavors (suitable for prod-mode/CI):
```
npm install ci
npm run build
```
Only debug-mode artifacts:
```
npm run build:debug
```
Build and watch (customized dev setups where you'll want to host through another server than webpacks' - for example in a sub-module/project)
```
npm run build:watch
```
Only specific flavor (known configs are: debug, dist, light, light-dist, demo):
```
npm run build -- --env dist # replace "dist" by other configuration name, see above ^
```
Note: The "demo" config is always built.
**NOTE:** `hls.light.*.js` dist files do not include EME, subtitles, CMCD, or alternate-audio support. In addition,
the following types are not available in the light build:
- `AudioStreamController`
- `AudioTrackController`
- `CuesInterface`
- `EMEController`
- `SubtitleStreamController`
- `SubtitleTrackController`
- `TimelineController`
- `CmcdController`
### Linter (ESlint)
Run linter:
```
npm run lint
```
Run linter with auto-fix mode:
```
npm run lint:fix
```
Run linter with errors only (no warnings)
```
npm run lint:quiet
```
### Formatting Code
Run prettier to format code
```
npm run prettier
```
### Type Check
Run type-check to verify TypeScript types
```
npm run type-check
```
### Automated tests (Mocha/Karma)
Run all tests at once:
```
npm test
```
Run unit tests:
```
npm run test:unit
```
Run unit tests in watch mode:
```
npm run test:unit:watch
```
Run functional (integration) tests:
```
npm run test:func
```
## Design
An overview of this project's design, it's modules, events, and error handling can be found [here](/docs/design.md).
## API docs and usage guide
- [API and usage docs, with code examples](./docs/API.md)
- [Auto-Generated API Docs (Latest Release)](https://hls-js.netlify.com/api-docs)
- [Auto-Generated API Docs (Development Branch)](https://hls-js-dev.netlify.com/api-docs)
_Note you can access the docs for a particular version using "[https://github.com/video-dev/hls.js/tree/deployments](https://github.com/video-dev/hls.js/tree/deployments)"_
## Demo
### Latest Release
[https://hls-js.netlify.com/demo](https://hls-js.netlify.com/demo)
### Master
[https://hls-js-dev.netlify.com/demo](https://hls-js-dev.netlify.com/demo)
### Specific Version
Find the commit on [https://github.com/video-dev/hls.js/tree/deployments](https://github.com/video-dev/hls.js/tree/deployments).
[![](https://www.netlify.com/img/global/badges/netlify-color-accent.svg)](https://www.netlify.com)
[![](https://opensource.saucelabs.com/images/opensauce/powered-by-saucelabs-badge-gray.png?sanitize=true)](https://saucelabs.com)
## Compatibility
HLS.js is only compatible with browsers supporting MediaSource extensions (MSE) API with 'video/MP4' mime-type inputs.
HLS.js is supported on:
- Chrome 39+ for Android
- Chrome 39+ for Desktop
- Firefox 41+ for Android
- Firefox 42+ for Desktop
- IE11 for Windows 8.1+
- Edge for Windows 10+
- Safari 8+ for MacOS 10.10+
- Safari for ipadOS 13+
A [Promise polyfill](https://github.com/taylorhakes/promise-polyfill) is required in browsers missing native promise support.
**Please note:** iOS Safari on iPhone does not support the MediaSource API. This includes all browsers on iOS as well as apps using UIWebView and WKWebView.
Safari browsers (iOS, iPadOS, and macOS) have built-in HLS support through the plain video "tag" source URL. See the example below (Using HLS.js) to run appropriate feature detection and choose between using HLS.js or natively built-in HLS support.
When a platform has neither MediaSource nor native HLS support, the browser cannot play HLS.
_Keep in mind that if the intention is to support HLS on multiple platforms, beyond those compatible with HLS.js, the HLS streams need to strictly follow the specifications of RFC8216, especially if apps, smart TVs, and set-top boxes are to be supported._
Find a support matrix of the MediaSource API here: https://developer.mozilla.org/en-US/docs/Web/API/MediaSource
## Using HLS.js
### Installation
Prepackaged builds are included [with each release](https://github.com/video-dev/hls.js/releases). Or install the hls.js as a dependency
of your project:
```sh
npm install --save hls.js
```
A canary channel is also available if you prefer to work off the development branch (master):
```
npm install hls.js@canary
```
### Embedding HLS.js
Directly include dist/hls.js or dist/hls.min.js in a script tag on the page. This setup prioritizes HLS.js MSE playback over
native browser support for HLS playback in HTMLMediaElements:
```html
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent alpha version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
<video id="video"></video>
<script>
var video = document.getElementById('video');
var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
// HLS.js is not supported on platforms that do not have Media Source
// Extensions (MSE) enabled.
//
// When the browser has built-in HLS support (check using `canPlayType`),
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
// element through the `src` property. This is using the built-in support
// of the plain video element, without using HLS.js.
//
// Note: it would be more normal to wait on the 'canplay' event below however
// on Safari (where you are most likely to find built-in HLS support) the
// video.src URL must be on the user-driven white-list before a 'canplay'
// event will be emitted; the last video event that can be reliably
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
}
</script>
```
#### Alternative setup
To check for native browser support first and then fallback to HLS.js, swap these conditionals. See [this comment](https://github.com/video-dev/hls.js/pull/2954#issuecomment-670021358) to understand some of the tradeoffs.
```html
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Or if you want a more recent alpha version -->
<!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@alpha"></script> -->
<video id="video"></video>
<script>
var video = document.getElementById('video');
var videoSrc = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
//
// First check for native browser HLS support
//
if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
//
// If no native HLS support, check if HLS.js is supported
//
} else if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
</script>
```
For more embed and API examples see [docs/API.md](./docs/API.md).
## CORS
All HLS resources must be delivered with [CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) permitting `GET` requests.
## Video Control
Video is controlled through HTML `<video>` element `HTMLVideoElement` methods, events and optional UI controls (`<video controls>`).
## Player Integration
The following players integrate HLS.js for HLS playback:
- [JW Player](https://www.jwplayer.com)
- [Akamai Adaptive Media Player (AMP)](https://www.akamai.com/us/en/solutions/products/media-delivery/adaptive-media-player.jsp)
- [Clappr](https://github.com/clappr/clappr)
- [Flowplayer](https://www.flowplayer.org) through [flowplayer-hlsjs](https://github.com/flowplayer/flowplayer-hlsjs)
- [MediaElement.js](https://www.mediaelementjs.com)
- [Videojs](https://videojs.com) through [Videojs-hlsjs](https://github.com/benjipott/videojs-hlsjs)
- [Videojs](https://videojs.com) through [videojs-hls.js](https://github.com/streamroot/videojs-hls.js). hls.js is integrated as a SourceHandler -- new feature in Video.js 5.
- [Videojs](https://videojs.com) through [videojs-contrib-hls.js](https://github.com/Peer5/videojs-contrib-hls.js). Production ready plug-in with full fallback compatibility built-in.
- [Fluid Player](https://www.fluidplayer.com)
- [OpenPlayerJS](https://www.openplayerjs.com), as part of the [OpenPlayer project](https://github.com/openplayerjs)
- [CDNBye](https://github.com/cdnbye/hlsjs-p2p-engine), a p2p engine for hls.js powered by WebRTC Datachannel.
### They use HLS.js in production!
| | | | |
| :----------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| [<img src="https://i.cdn.turner.com/adultswim/big/img/global/adultswim.jpg" width="120">](https://www.adultswim.com/streams) | [<img src="https://avatars3.githubusercontent.com/u/5497190?s=200&v=4" width="120">](https://www.akamai.com) | [<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Canal%2B.svg/2000px-Canal%2B.svg.png" width="120">](https://www.canalplus.fr) | [<img src="https://avatars2.githubusercontent.com/u/115313" width="120">](https://www.dailymotion.com) |
| [<img src="https://user-images.githubusercontent.com/4006693/44003595-baff193c-9e8f-11e8-9848-7bb91563499f.png" width="120">](https://freshlive.tv) | [<img src="https://flowplayer.org/media/img/logo-blue.png" width="120">](https://flowplayer.com) | [<img src="https://avatars1.githubusercontent.com/u/12554082?s=240" width="120">](https://www.foxsports.com.au) | [<img src="https://cloud.githubusercontent.com/assets/244265/12556435/dfaceb48-c353-11e5-971b-2c4429725469.png" width="120">](https://www.globo.com) |
| [<img src="https://images.gunosy.com/logo/gunosy_icon_company_logo.png" width="120">](https://gunosy.com) | [<img src="https://user-images.githubusercontent.com/1480052/35802840-f8e85b8a-0a71-11e8-8eb2-eee323e3f159.png" width="120">](https://www.gl-systemhaus.de/) | [<img src="https://cloud.githubusercontent.com/assets/6525783/20801836/700490de-b7ea-11e6-82bd-e249f91c7bae.jpg" width="120">](https://nettrek.de) | [<img src="https://cloud.githubusercontent.com/assets/244265/12556385/999aa884-c353-11e5-9102-79df54384498.png" width="120">](https://www.nytimes.com/) |
| [<img src="https://cloud.githubusercontent.com/assets/1798553/20356424/ba158574-ac24-11e6-95e1-1ae591b11a0a.png" width="120">](https://www.peer5.com/) | [<img src="https://cloud.githubusercontent.com/assets/4909096/20925062/e26e6fc8-bbb4-11e6-99a5-d4762274a342.png" width="120">](https://www.qbrick.com) | [<img src="https://www.radiantmediaplayer.com/images/radiantmediaplayer-new-logo-640.jpg" width="120">](https://www.radiantmediaplayer.com/) | [<img src="https://www.rts.ch/hummingbird-static/images/logos/logo_marts.svg" width="120">](https://www.rts.ch) |
| [<img src="https://cloud.githubusercontent.com/assets/12702747/19316434/0a3601de-9067-11e6-85e2-936b1cb099a0.png" width="120">](https://www.snapstream.com/) | [<img src="https://pamediagroup.com/wp-content/uploads/2019/05/StreamAMG-Logo-RGB.png" width="120">](https://www.streamamg.com/) | [<img src="https://streamsharkio.sa.metacdn.com/wp-content/uploads/2015/10/streamshark-dark.svg" width="120">](https://streamshark.io/) | [<img src="https://camo.githubusercontent.com/9580f10e9bfa8aa7fba52c5cb447bee0757e33da/68747470733a2f2f7777772e7461626c6f74762e636f6d2f7374617469632f696d616765732f7461626c6f5f6c6f676f2e706e67" width="120">](https://my.tablotv.com/) |
| [<img src="https://user-images.githubusercontent.com/2803310/34083705-349c8fd0-e375-11e7-92a6-5c38509f4936.png" width="120">](https://www.streamroot.io/) | [<img src="https://vignette1.wikia.nocookie.net/tedtalks/images/c/c0/TED_logo.png/revision/20150915192527" width="120">](https://www.ted.com/) | [<img src="https://www.seeklogo.net/wp-content/uploads/2014/12/twitter-logo-vector-download.jpg" width="120">](https://twitter.com/) | [<img src="https://player.clevercast.com/img/clevercast.png" width="120">](https://www.clevercast.com) |
| [<img src="https://player.mtvnservices.com/edge/hosted/Viacom_logo.svg" width="120">](https://www.viacom.com/) | [<img src="https://user-images.githubusercontent.com/1181974/29248959-efabc440-802d-11e7-8050-7c1f4ca6c607.png" width="120">](https://vk.com/) | [<img src="https://avatars0.githubusercontent.com/u/5090060?s=200&v=4" width="120">](https://www.jwplayer.com) | [<img src="https://staticftv-a.akamaihd.net/arches/francetv/default/img/og-image.jpg?20161007" width="120">](https://www.france.tv) |
| [<img src="https://showmax.akamaized.net/e/logo/showmax_black.png" width="120">](https://tech.showmax.com) | [<img src="https://static3.1tv.ru/assets/web/logo-ac67852f1625b338f9d1fb96be089d03557d50bfc5790d5f48dc56799f59dec6.svg" width="120" height="120">](https://www.1tv.ru/) | [<img src="https://user-images.githubusercontent.com/1480052/40482633-c013ebce-5f55-11e8-96d5-b776415de0ce.png" width="120">](https://www.zdf.de) | [<img src="https://github.com/cdnbye/hlsjs-p2p-engine/blob/master/figs/cdnbye.png" width="120">](https://github.com/cdnbye/hlsjs-p2p-engine) |
| [cdn77](https://streaming.cdn77.com/) | [<img src="https://avatars0.githubusercontent.com/u/7442371?s=200&v=4" width="120">](https://r7.com/) | [<img src="https://raw.githubusercontent.com/Novage/p2p-media-loader/gh-pages/images/p2pml-logo.png" width="120">](https://github.com/Novage/p2p-media-loader) | [<img src="https://avatars3.githubusercontent.com/u/45617200?s=400" width="120">](https://kayosports.com.au) |
| [<img src="https://avatars1.githubusercontent.com/u/5279615?s=400&u=9771a216836c613f1edf4afe71cfc69d4c5657ed&v=4" width="120">](https://flosports.tv) | [<img src="https://www.logolynx.com/images/logolynx/c6/c67a2cb3ad33a82b5518f8ad8f124703.png" width="120">](https://global.axon.com/) | | |
## Chrome/Firefox integration
made by [gramk](https://github.com/gramk/chrome-hls), plays hls from address bar and m3u8 links
- Chrome [native-hls](https://chrome.google.com/webstore/detail/native-hls-playback/emnphkkblegpebimobpbekeedfgemhof)
- Firefox [native-hls](https://addons.mozilla.org/en-US/firefox/addon/native_hls_playback/)
## License
HLS.js is released under [Apache 2.0 License](LICENSE)

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

27804
public/ckplayer/hls.js/hls.js Normal file

File diff suppressed because it is too large Load Diff

2837
public/ckplayer/hls.js/hls.js.d.ts vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
public/ckplayer/hls.js/hls.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

7
public/ckplayer/js/ckplayer.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,72 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.ckplayerLanguage = factory());
}(this, function () { 'use strict';
/*
* 功能包含播放器用到的全部相关语言文字
*/
var language={
play:'Play',
pause:'Pause',
refresh:'Refresh',
full:'Fullscreen',
exitFull:'Non-Fullscreen',
webFull:'Web fullscreen',
exitWebFull:'Non-Web fullscreen',
theatre:'Theatre',
exitTheatre:'Non-theatre',
volume:'Volume',
muted:'Mute',
exitmuted:'Unmute',
seek:'Seek',
waiting:'Waiting',
live:'Liveing',
backLive:'Back live',
lookBack:'Look back',
next:'Next episode',
screenshot:'Screenshot',
smallwindows:'Small windows',
playbackrate:'Speed',
playbackrateSuffix:' Speed',
track:'Subtitle',
noTrack:'No subtitle',
definition:'Definition',
switchTo:'Switched from',
closeTime:'The advertisement can be closed in {seconds} seconds',
closeAd:'Close ad',
second:'seconds',
details:'View details',
copy:'Copy',
copySucceeded:'Copy succeeded, can be pasted!',
smallwindowsOpen:'The small window function is turned on',
screenshotStart:'Screenshot, please wait...',
smallwindowsClose:'The small window function is turned off',
screenshotClose:'Screenshot function is turned off',
loopOpen:'Loop open',
loopClose:'Loop close',
close:'Close',
down:'Down',
p50:'50%',
p75:'75%',
p100:'100%',
timeScheduleAdjust:{
prohibit:'No dragging',
prohibitBackOff:'No repeat viewing',
prohibitForward:'Fast forward prohibited',
prohibitLookBack:'Some content is forbidden to play',
prohibitForwardNotViewed:'Disable playback of parts not viewed'
},
error:{
noMessage:'Unknown error',
supportVideoError:'The browser version is too low. It is recommended to replace it with another browser',
videoTypeError:'This browser does not support playing this video. It is recommended to replace it with another browser',
loadingFailed:'Loading failed',
emptied:'An error occurred while loading the frequency file',
screenshot:'Screenshot failed',
ajax:'Ajax data request error',
noVideoContainer:'No video container'
}
};
return language;
}))

View File

@ -0,0 +1,72 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.ckplayerLanguage = factory());
}(this, function () { 'use strict';
/*
* 功能包含播放器用到的全部相关语言文字
*/
var language={
play:'播放',
pause:'暂停',
refresh:'重播',
full:'全屏',
exitFull:'退出全屏',
webFull:'页面全屏',
exitWebFull:'退出页面全屏',
theatre:'剧场模式',
exitTheatre:'退出剧场模式',
volume:'音量:',
muted:'静音',
exitmuted:'恢复音量',
seek:'seek',
waiting:'缓冲',
live:'直播中',
backLive:'返回直播',
lookBack:'回看:',
next:'下一集',
screenshot:'视频截图',
smallwindows:'小窗口播放功能',
playbackrate:'倍速',
playbackrateSuffix:'倍',
track:'字幕',
noTrack:'无字幕',
definition:'清晰度',
switchTo:'切换成:',
closeTime:'{seconds}秒后可关闭广告',
closeAd:'关闭广告',
second:'秒',
details:'查看详情',
copy:'复制',
copySucceeded:'复制成功,可贴粘!',
smallwindowsOpen:'小窗口功能已开启',
smallwindowsClose:'小窗口功能已关闭',
screenshotStart:'截图中,请稍候...',
screenshotClose:'截图功能已关闭',
loopOpen:'循环播放',
loopClose:'已关闭循环播放',
close:'关闭',
down:'下载',
p50:'50%',
p75:'75%',
p100:'100%',
timeScheduleAdjust:{
prohibit:'视频禁止拖动',
prohibitBackOff:'视频禁止重复观看',
prohibitForward:'视频禁止快进',
prohibitLookBack:'视频禁止播放部分内容',
prohibitForwardNotViewed:'视频禁止播放未观看的部分'
},
error:{
noMessage:'未知错误',
supportVideoError:'该浏览器版本太低,建议更换成其它浏览器',
videoTypeError:'该浏览器不支持播放该视频,建议更换成其它浏览器',
loadingFailed:'加载失败',
emptied:'视频文件加载过程中出现错误',
screenshot:'视频截图失败',
ajax:'Ajax数据请求错误',
noVideoContainer:'未找到放置视频的容器'
}
};
return language;
}))

View File

@ -0,0 +1,72 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = global || self, global.ckplayerLanguage = factory());
}(this, function () { 'use strict';
/*
*功能包含播放機用到的全部相關語言文字
*/
var language = {
play: '播放',
pause: '暫停',
refresh: '重播',
full: '全屏',
exitFull: '退出全屏',
webFull: '頁面全屏',
exitWebFull: '退出頁面全屏',
theatre: '劇場模式',
exitTheatre: '退出劇場模式',
volume: '音量:',
muted: '靜音',
exitmuted: '恢復音量',
seek: 'seek:',
waiting: '緩衝',
live: '直播中',
backLive: '返回直播',
lookBack: '回看:',
next: '下一集',
screenshot: '視頻截圖',
smallwindows: '小視窗播放功能',
playbackrate: '倍速',
playbackrateSuffix: '倍',
track: '字幕',
noTrack: '無字幕',
definition: '清晰度',
switchTo: '切換成:',
closeTime: '{seconds}秒後可關閉廣告',
closeAd: '關閉廣告',
second: '秒',
details: '查看詳情',
copy: '複製',
copySucceeded: '複製成功,可貼粘!',
smallwindowsOpen: '小視窗功能已開啟',
smallwindowsClose: '小視窗功能已關閉',
screenshotStart: '截圖中,請稍候…',
screenshotClose: '截圖功能已關閉',
loopOpen: '迴圈播放',
loopClose: '已關閉迴圈播放',
close: '關閉',
down: '下載',
p50: '50%',
p75: '75%',
p100: '100%',
timeScheduleAdjust: {
prohibit: '視頻禁止拖動',
prohibitBackOff: '視頻禁止重複觀看',
prohibitForward: '視頻禁止快進',
prohibitLookBack: '視頻禁止播放部分內容',
prohibitForwardNotViewed: '視頻禁止播放未觀看的部分'
},
error: {
noMessage: '未知錯誤',
supportVideoError: '該流覽器版本太低,建議更換成其它瀏覽器',
videoTypeError: '該瀏覽器不支持播放該視頻,建議更換成其它瀏覽器',
loadingFailed: '加載失敗',
emptied: '視頻檔案加載過程中出現錯誤',
screenshot: '視頻截圖失敗',
ajax: 'Ajax數據請求錯誤',
noVideoContainer: '未找到放置視頻的容器'
}
};
return language;
}))

View File

@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

BIN
public/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 549 B

Some files were not shown because too many files have changed in this diff Show More