如何在JavaScript中播放本地或Blob视频文件

/**
 * 动态创建视频播放器并加载指定路径的视频。
 * @param {string} videoPath - 视频文件的URL路径。
 * @param {string} videoType - 视频的MIME类型，例如 'video/mp4'。
 */
function playVideoFromPath(videoPath, videoType = 'video/mp4') {
    // 1. 创建视频元素
    const videoElement = document.createElement("video");
    videoElement.controls = true; // 添加播放控制条

    // 2. 创建源元素
    const sourceElement = document.createElement("source");
    sourceElement.setAttribute('src', videoPath);
    sourceElement.setAttribute('type', videoType);

    // 3. 将源元素添加到视频元素中
    videoElement.appendChild(sourceElement);

    // 4. 将视频元素添加到文档的某个位置
    // 这里以添加到body为例，实际应用中可以添加到特定的容器
    document.body.appendChild(videoElement);

    console.log(`视频播放器已创建，尝试加载：${videoPath}`);

    // 可以在这里添加事件监听，例如视频加载失败的错误处理
    videoElement.onerror = (event) => {
        console.error('视频加载失败:', event);
        alert('视频加载失败，请检查路径或文件格式。');
    };
}

// 示例用法：播放名为 'video.mp4' 的文件
// 确保 'video.mp4' 文件在与HTML文件相同的目录下或可通过相对路径访问
playVideoFromPath('video.mp4', 'video/mp4');

/**
 * 从指定URL获取视频数据并使用Blob URL播放。
 * @param {string} videoUrl - 视频文件的API或资源URL。
 * @param {string} videoType - 视频的MIME类型。
 */
async function playVideoFromFetchedBlob(videoUrl, videoType = 'video/mp4') {
    try {
        const response = await fetch(videoUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const videoBlob = await response.blob();

        // 确保获取到的Blob类型与预期的视频类型一致
        if (!videoBlob.type.startsWith('video/')) {
            console.warn(`警告：获取到的MIME类型为 ${videoBlob.type}，与预期 ${videoType} 不符。`);
            // 可以选择强制设置类型，但更好的做法是服务器返回正确类型
            // videoBlob = new Blob([videoBlob], { type: videoType });
        }

        const blobUrl = URL.createObjectURL(videoBlob);
        console.log('Blob URL:', blobUrl);

        const videoElement = document.createElement("video");
        videoElement.controls = true;
        videoElement.src = blobUrl;
        document.body.appendChild(videoElement);

        // 播放结束后或不再需要时，释放Blob URL以避免内存泄漏
        videoElement.onended = () => {
            URL.revokeObjectURL(blobUrl);
            console.log('Blob URL 已释放。');
        };
        videoElement.onerror = (event) => {
            console.error('Blob视频播放失败:', event);
            URL.revokeObjectURL(blobUrl); // 失败也释放
            alert('Blob视频播放失败，请检查数据或MIME类型。');
        };

    } catch (error) {
        console.error('获取视频数据失败:', error);
        alert('获取视频数据失败。');
    }
}

// 示例用法：从一个假设的API获取视频
// playVideoFromFetchedBlob('/api/get-video-data', 'video/mp4');
// 或者从一个直接的视频文件URL获取，但通常直接播放更简单
// playVideoFromFetchedBlob('path/to/remote/video.mp4', 'video/mp4');

<input type="file" id="videoFileInput" accept="video/*">
<button id="playSelectedVideo">播放选择的视频</button>

document.getElementById('playSelectedVideo').addEventListener('click', () => {
    const fileInput = document.getElementById('videoFileInput');
    const file = fileInput.files[0];

    if (file && file.type.startsWith('video/')) {
        const blobUrl = URL.createObjectURL(file);
        console.log('用户选择的视频Blob URL:', blobUrl);

        const videoElement = document.createElement("video");
        videoElement.controls = true;
        videoElement.src = blobUrl;
        document.body.appendChild(videoElement);

        // 同样，在不需要时释放Blob URL
        videoElement.onended = () => {
            URL.revokeObjectURL(blobUrl);
            console.log('Blob URL (用户文件) 已释放。');
        };
        videoElement.onerror = (event) => {
            console.error('用户选择的视频播放失败:', event);
            URL.revokeObjectURL(blobUrl);
            alert('用户选择的视频播放失败，请检查文件。');
        };
    } else {
        alert('请选择一个视频文件。');
    }
});