h5怎么实现上传视频

使用HTML5实现视频上传

HTML5提供了<input type="file">元素用于文件上传，结合<video>标签可以实现视频上传和预览功能。

<input type="file" id="videoUpload" accept="video/*">
<video id="videoPreview" controls style="display:none;"></video>

处理文件选择事件

通过JavaScript监听文件选择事件，获取用户选择的视频文件并显示预览。

document.getElementById('videoUpload').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const videoPreview = document.getElementById('videoPreview');
    const videoURL = URL.createObjectURL(file);

    videoPreview.src = videoURL;
    videoPreview.style.display = 'block';
});

上传视频到服务器

使用FormData和fetchAPI将视频文件发送到服务器。

function uploadVideo(file) {
    const formData = new FormData();
    formData.append('video', file);

    fetch('/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log('Upload success:', data))
    .catch(error => console.error('Upload error:', error));
}

document.getElementById('videoUpload').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) uploadVideo(file);
});

添加进度显示

使用XMLHttpRequest可以获取上传进度。

function uploadWithProgress(file) {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload');

    xhr.upload.onprogress = function(e) {
        if (e.lengthComputable) {
            const percent = (e.loaded / e.total) * 100;
            console.log(`Upload progress: ${percent}%`);
        }
    };

    xhr.onload = function() {
        console.log('Upload complete');
    };

    const formData = new FormData();
    formData.append('video', file);
    xhr.send(formData);
}

视频格式和大小验证

在上传前验证视频格式和大小。

document.getElementById('videoUpload').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const validTypes = ['video/mp4', 'video/webm', 'video/ogg'];
    const maxSize = 100 * 1024 * 1024; // 100MB

    if (!validTypes.includes(file.type)) {
        alert('Invalid video format');
        return;
    }

    if (file.size > maxSize) {
        alert('Video too large');
        return;
    }

    uploadVideo(file);
});

使用第三方库简化上传

使用如Dropzone.js等库可以简化上传流程。

<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css">
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

<form action="/upload" class="dropzone" id="videoDropzone"></form>

Dropzone.options.videoDropzone = {
    acceptedFiles: 'video/*',
    maxFilesize: 100, // MB
    dictDefaultMessage: 'Drop video files here or click to upload'
};

服务器端处理

服务器端需要设置接收文件的路由和处理逻辑。以Node.js Express为例：

const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('video'), (req, res) => {
    console.log('File saved:', req.file);
    res.json({ success: true });
});