File size: 1,873 Bytes
3a910a6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
---
title: new3
emoji: 🐳
colorFrom: green
colorTo: gray
sdk: static
pinned: false
tags:
- deepsite
---
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
# Kho truyện Mã A Lềnh - Video Story Player
A beautiful story player system for displaying and playing Vietnamese folk stories with video support.
## Features
- Responsive design that works on desktop and mobile devices
- Beautiful card-based interface for browsing stories
- Video playback support with modal player
- Favorites system that persists between sessions (using localStorage)
- Filtering by story type
## Setup Instructions
### 1. Place your video files
Add your video files to the `videos` directory. The system is configured to use the following files:
- `videos/chuyen-con-suoi-muong-tien.mp4` - Story 1: Chuyện con suối Mường Tiên
- `videos/chiec-banh-trong-day-tui.mp4` - Story 2: Chiếc bánh trong đẩy túi
- `videos/vung-dam-cua-than-rong.mp4` - Story 3: Vũng đầm của thần rồng
### 2. Customize (Optional)
If you want to use different video files or paths:
1. Open `videos.js`
2. Modify the `videoSources` object to point to your video files
```javascript
const videoSources = {
1: "your/custom/path/to/video1.mp4",
2: "your/custom/path/to/video2.mp4",
3: "your/custom/path/to/video3.mp4",
};
```
### 3. Launch the website
Open `index.html` in your web browser or deploy it to your web server.
## Adding More Stories
To add additional stories:
1. Duplicate one of the existing story card sections in `index.html`
2. Update the content (image, title, description, duration)
3. Update the `data-story` attribute to a new unique number
4. Add the corresponding video source in `videos.js`
## Technologies Used
- HTML5
- CSS3 (with Tailwind CSS)
- JavaScript
- Font Awesome for icons
- Google Fonts
|