当前位置：首页 > 行业动态 > 正文

如何实现视频在线播放功能？

admin
行业动态
2024-10-05
2

视频在线播放源码通常包括前端播放器、后端服务器和流媒体协议。

创建一个在线视频播放平台需要处理多个方面，包括前端界面、后端服务、数据库和视频文件的存储与管理，这里我们使用HTML, CSS, JavaScript来构建前端，Node.js和Express框架来构建后端，MongoDB作为数据库，以及使用AWS S3来存储视频文件。

如何实现视频在线播放功能？第1张

1. 环境准备

确保你已经安装了以下工具：

Node.js 和 npm

MongoDB

AWS CLI（用于上传视频文件到S3）

2. 项目结构

videoplayer/
├── public/
│   ├── index.html
│   ├── style.css
│   └── app.js
├── server/
│   ├── server.js
│   ├── routes/
│   │   └── video.js
│   ├── controllers/
│   │   └── videoController.js
│   ├── models/
│   │   └── videoModel.js
│   └── package.json
├── .env
└── package.json

3. 前端部分

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <title>Online Video Player</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Video List</h1>
    <div id="app"></div>
    <script src="app.js"></script>
</body>
</html>

public/style.css

body {
    fontfamily: Arial, sansserif;
}
#app {
    display: flex;
    flexdirection: column;
    alignitems: center;
}
video {
    width: 60%;
    margintop: 20px;
}

public/app.js

document.addEventListener("DOMContentLoaded", function() {
    fetch('/api/videos')
        .then(response => response.json())
        .then(data => {
            let videoList = document.getElementById('app');
            data.forEach(video => {
                let videoElement = document.createElement('video');
                videoElement.src = video.url;
                videoElement.controls = true;
                videoList.appendChild(videoElement);
            });
        })
        .catch(error => console.error('Error fetching videos:', error));
});

4. 后端部分

server/server.js

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('bodyparser');
const cors = require('cors');
require('dotenv').config();
const app = express();
const port = process.env.PORT || 3000;
app.use(cors());
app.use(bodyParser.json());
// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
    .then(() => console.log('MongoDB connected'))
    .catch(err => console.log(err));
// Routes
app.use('/api', require('./routes/video'));
app.listen(port, () => {
    console.log(Server running on port ${port});
});

server/package.json

{
  "name": "videoplayer",
  "version": "1.0.0",
  "main": "server.js",
  "dependencies": {
    "express": "^4.17.1",
    "mongoose": "^5.12.3",
    "bodyparser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0"
  }
}

server/routes/video.js

const express = require('express');
const router = express.Router();
const videoController = require('../controllers/videoController');
router.get('/', videoController.getAllVideos);
router.post('/', videoController.uploadVideo);
module.exports = router;

server/controllers/videoController.js

const Video = require('../models/videoModel');
const aws = require('awssdk');
const fs = require('fs');
const path = require('path');
const dotenv = require('dotenv');
dotenv.config();
const s3 = new aws.S3({
    accessKeyId: process.env.AWS_ACCESS_KEY,
    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
});
exports.getAllVideos = async (req, res) => {
    try {
        const videos = await Video.find();
        res.status(200).json(videos);
    } catch (error) {
        res.status(500).json({ message: 'Error fetching videos' });
    }
};
exports.uploadVideo = async (req, res) => {
    const file = req.files.file;
    const fileStream = fs.createReadStream(file.path);
    const uploadParams = {
        Bucket: process.env.AWS_BUCKET_NAME,
        Key: file.originalname, // Use a unique name for the key to avoid overwriting files with the same name
        Body: fileStream,
    };
    return s3.upload(uploadParams, (err, data) => {
        if (err) {
            return res.status(500).json({ message: 'There was an error uploading your file' });
        } else {
            const newVideo = new Video({ url: data.Location });
            newVideo.save()
                .then(() => {
                    res.status(201).json({ message: 'Video uploaded successfully' });
                })
                .catch(err => res.status(500).json({ message: 'There was an error saving the video to the database' }));
        }
    });
};

server/models/videoModel.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;
const VideoSchema = new Schema({
    url: { type: String, required: true },
});
module.exports = mongoose.model('Video', VideoSchema);

5. 配置环境变量.env 文件内容示例：

MONGO_URI=mongodb://localhost:27017/videoplayer
AWS_ACCESS_KEY=youraccesskeyid
AWS_SECRET_ACCESS_KEY=yoursecretaccesskey
AWS_BUCKET_NAME=yourbucketname
PORT=3000

6. 安装依赖并运行服务器

在server 目录下运行：