JavaScript本地视频播放教程：理解Blob与文件路径的正确用法

var URL = window.URL || window.webkitURL;
// 错误示范：试图将文件路径字符串封装成Blob
var file = new Blob(["./video.mp4"], {"type": "video/mp4"});
var value = URL.createObjectURL(file);

console.log(value); // 输出一个blob URL，例如 blob:http://localhost:8000/a1b2c3d4-e5f6-7890-abcd-ef0123456789
var videoElement = document.querySelector('video'); // 假设页面中存在一个video标签
if (videoElement) {
    videoElement.src = value;
    videoElement.play(); // 尝试播放时会报错
}

document.addEventListener('DOMContentLoaded', () => {
    // 假设 video.mp4 位于与当前HTML文件相同的目录下
    const videoFilePath = 'video.mp4'; 

    // 1. 创建 <video> 元素
    const videoElement = document.createElement('video');
    videoElement.controls = true; // 添加播放控件
    videoElement.autoplay = false; // 避免自动播放，提供更好的用户体验
    videoElement.style.maxWidth = '600px'; // 示例样式

    // 2. 创建 <source> 元素
    const sourceElement = document.createElement('source');
    sourceElement.setAttribute('src', videoFilePath);
    sourceElement.setAttribute('type', 'video/mp4'); // 指定MIME类型

    // 3. 将 <source> 添加到 <video>
    videoElement.appendChild(sourceElement);

    // 4. 将 <video> 添加到文档体中
    document.body.appendChild(videoElement);

    // 可选：添加错误处理
    videoElement.addEventListener('error', (e) => {
        console.error('视频播放错误:', e);
        alert('视频加载失败或格式不受支持。');
    });

    console.log('视频元素已成功添加到页面。');
});

<!-- HTML 结构 -->
<video id="myVideoPlayer" controls autoplay style="max-width: 600px;">
    <!-- 可以预设一个source，或者通过JS添加 -->
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持HTML5视频。
</video>

// JavaScript 代码
document.addEventListener('DOMContentLoaded', () => {
    const videoElement = document.getElementById('myVideoPlayer');
    if (videoElement) {
        // 如果视频元素中没有source标签，可以直接设置video.src
        // videoElement.src = 'video.mp4'; 
        // 或者修改已存在的source标签的src
        const sourceElement = videoElement.querySelector('source');
        if (sourceElement) {
            sourceElement.src = 'video.mp4';
            sourceElement.type = 'video/mp4';
            videoElement.load(); // 重新加载视频源
        } else {
            console.warn('未找到 <source> 标签，请考虑直接设置 video.src 或添加 <source>。');
        }
        videoElement.play().catch(error => {
            console.warn('视频自动播放被阻止:', error);
            // 提示用户点击播放
        });
    }
});

<!-- HTML 结构 -->
<input type="file" id="videoFileInput" accept="video/*">
<video id="previewVideo" controls style="max-width: 600px; display: none;"></video>

// JavaScript 代码
document.addEventListener('DOMContentLoaded', () => {
    const videoFileInput = document.getElementById('videoFileInput');
    const previewVideo = document.getElementById('previewVideo');

    videoFileInput.addEventListener('change', (event) => {
        const file = event.target.files[0]; // 获取用户选择的文件

        if (file && file.type.startsWith('video/')) {
            const videoURL = URL.createObjectURL(file); // 为File对象创建Blob URL
            previewVideo.src = videoURL;
            previewVideo.style.display = 'block';
            previewVideo.load(); // 加载新的视频源
            previewVideo.play().catch(error => {
                console.warn('视频自动播放被阻止:', error);
                // 提示用户点击播放
            });

            // 重要的：在不再需要Blob URL时，释放它以节省内存
            previewVideo.addEventListener('ended', () => {
                URL.revokeObjectURL(videoURL);
                console.log('Blob URL 已释放。');
            }, { once: true }); // 视频播放结束后只执行一次
            // 或者在文件输入框再次选择文件时释放旧的URL
            videoFileInput.addEventListener('change', () => {
                if (previewVideo.src && previewVideo.src.startsWith('blob:')) {
                    URL.revokeObjectURL(previewVideo.src);
                    console.log('旧的Blob URL 已释放。');
                }
            }, { once: true });
        } else {
            alert('请选择一个视频文件。');
            previewVideo.style.display = 'none';
            previewVideo.src = ''; // 清空src
        }
    });
});