本教程旨在解决在JavaScript中尝试流式播放本地视频文件时常见的`DOMException: The element has no supported sources`错误。我们将详细讲解如何正确地创建并配置HTML `
理解问题：为什么直接用字符串创建Blob会失败？
在尝试通过JavaScript播放本地视频文件时，开发者有时会遇到一个常见的误区：试图通过将文件路径字符串直接传递给Blob构造函数来创建视频Blob，例如：
var file = new Blob(["./video.mp4"], {"type": "video/mp4"});
var value = URL.createObjectURL(file);
console.log(value); // 输出一个Blob URL，例如 blob:http://localhost:8080/some-uuid
video.src = value; // 尝试播放时报错这种做法会导致Uncaught (in promise) DOMException: The element has no supported sources.错误。其根本原因在于，new Blob(["./video.mp4"], ...)创建的Blob对象，其内容是字符串"./video.mp4"的二进制表示，而不是实际的video.mp4文件的二进制数据。因此，当浏览器尝试解析这个Blob URL作为视频源时，它发现Blob内部的数据并非有效的视频格式，从而抛出错误。
URL.createObjectURL()的正确用途是为已经存在于内存中的二进制数据（如File对象、Blob对象或MediaSource对象）创建一个临时的、可访问的URL。它不负责从文件系统加载文件内容。
立即学习“Java免费学习笔记（深入）”；
正确加载和播放本地视频文件
对于一个可直接通过URL访问的本地视频文件（例如，与HTML文件在同一目录下的video.mp4），最直接且有效的方法是将其路径设置为<source>元素的src属性。以下是使用JavaScript动态创建视频元素并加载本地视频的步骤：
1. 创建视频（<video>）元素
首先，我们需要在文档中创建一个<video>元素，它是HTML5中用于嵌入视频播放器的容器。
var videoElement = document.createElement("video");
// 可以设置一些视频属性，例如控制条、自动播放等
videoElement.controls = true; // 显示播放控制条
// videoElement.autoplay = true; // 自动播放
// videoElement.loop = true; // 循环播放2. 创建源（<source>）元素
为了指定视频文件的来源和类型，我们需要创建一个<source>元素，并将其作为子元素添加到<video>元素中。
var sourceElement = document.createElement("source");3. 设置源文件的路径和MIME类型
这是关键一步。将视频文件的相对或绝对路径赋给sourceElement的src属性，并指定正确的MIME类型（例如，对于MP4视频是video/mp4）。
sourceElement.setAttribute('src', 'video.mp4'); // 假设视频文件名为 video.mp4 且与HTML文件同级
sourceElement.setAttribute('type', 'video/mp4'); // 指定视频的MIME类型注意： 确保src属性指向的文件路径是正确的，并且视频文件的MIME类型与type属性的值匹配。不匹配的MIME类型也可能导致播放失败。
4. 将源元素添加到视频元素，并将视频元素添加到DOM
最后，将配置好的sourceElement添加到videoElement中，然后将videoElement添加到页面的某个位置（例如document.body）。
videoElement.appendChild(sourceElement); document.body.appendChild(videoElement); // 将视频添加到文档的<body>中
完整示例代码
结合上述步骤，完整的JavaScript代码如下：
/**
* 动态创建并加载本地视频文件到HTML页面
* @param {string} videoPath 视频文件的路径 (例如: 'video.mp4' 或 '/assets/videos/my_video.mp4')
* @param {string} mimeType 视频文件的MIME类型 (例如: 'video/mp4', 'video/webm')
*/
function loadAndPlayLocalVideo(videoPath, mimeType) {
// 1. 创建 <video> 元素
var videoElement = document.createElement("video");
videoElement.controls = true; // 显示播放控制条
videoElement.style.width = '640px'; // 设置视频宽度
videoElement.style.height = '360px'; // 设置视频高度
videoElement.style.border = '1px solid #ccc';
videoElement.style.display = 'block';
videoElement.style.margin = '20px auto';
// 2. 创建 <source> 元素
var sourceElement = document.createElement("source");
// 3. 设置源文件的路径和MIME类型
sourceElement.setAttribute('src', videoPath);
sourceElement.setAttribute('type', mimeType);
// 4. 将源元素添加到视频元素，并将视频元素添加到DOM
videoElement.appendChild(sourceElement);
// 可以在这里添加错误处理，例如当视频加载失败时
videoElement.onerror = function() {
console.error("视频加载失败或无法播放。请检查文件路径和MIME类型。");
// 可以尝试移除视频元素或显示错误消息
// videoElement.remove();
};
// 将视频元素添加到文档的某个容器中
// 假设我们有一个ID为 'video-container' 的 div
var container = document.getElementById('video-container');
if (!container) {
container = document.createElement('div');
container.id = 'video-container';
document.body.appendChild(container);
}
container.appendChild(videoElement);
console.log(`视频元素已创建并添加到DOM，尝试加载: ${videoPath}`);
}
// 调用函数加载视频
// 确保 'video.mp4' 文件与您的HTML文件在同一目录下，或者提供正确的相对/绝对路径
loadAndPlayLocalVideo('video.mp4', 'video/mp4');
// 也可以尝试加载其他格式，例如：
// loadAndPlayLocalVideo('my_video.webm', 'video/webm');为了运行上述代码，您需要一个HTML文件，例如index.html，以及一个名为video.mp4的视频文件（或您指定的其他文件）。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript 播放本地视频教程</title>
</head>
<body>
<h1>使用 JavaScript 动态播放本地视频</h1>
<div id="video-container">
<!-- 视频将在这里被JS代码添加 -->
</div>
<script src="your_script.js"></script> <!-- 假设上面的JS代码保存在 your_script.js -->
</body>
</html>URL.createObjectURL 的正确应用场景
虽然上述方法适用于直接通过路径访问的本地文件，但在某些情况下，URL.createObjectURL 仍然非常有用，例如：
-
用户上传的文件： 当用户通过<input type="file">选择文件时，您会获得一个File对象。File对象是Blob的子类型，可以直接用于URL.createObjectURL。
document.getElementById('fileInput').addEventListener('change', function(event) { var file = event.target.files[0]; // 获取用户选择的第一个文件 if (file && file.type.startsWith('video/')) { var videoURL = URL.createObjectURL(file); var videoElement = document.createElement("video"); videoElement.src = videoURL; videoElement.controls = true; document.body.appendChild(videoElement); // 当不再需要Blob URL时，应释放它以避免内存泄漏 videoElement.onended = function() { URL.revokeObjectURL(videoURL); console.log("Blob URL 已释放"); }; } else { alert('请选择一个视频文件。'); } }); -
通过Fetch API获取的二进制数据： 当您通过fetch请求获取到视频的二进制数据（例如response.blob()）时，可以创建一个Blob URL来播放它。
fetch('path/to/remote/video.mp4') .then(response => response.blob()) // 获取响应体作为Blob .then(videoBlob => { var videoURL = URL.createObjectURL(videoBlob); var videoElement = document.createElement("video"); videoElement.src = videoURL; videoElement.controls = true; document.body.appendChild(videoElement); // 同样，使用后释放URL videoElement.onended = function() { URL.revokeObjectURL(videoURL); console.log("Blob URL 已释放"); }; }) .catch(error => console.error('获取视频失败:', error));
重要提示： 使用URL.createObjectURL()创建的URL是临时的，并且只在当前文档的生命周期内有效。为了避免内存泄漏，当不再需要这些URL时，应该调用URL.revokeObjectURL()来释放它们。
总结
在JavaScript中播放本地视频文件，关键在于正确地指定视频源。对于可以直接通过路径访问的文件，应直接将路径赋值给<source>元素的src属性。而URL.createObjectURL()则适用于处理已存在于内存中的二进制数据（如用户上传的文件或通过网络获取的Blob数据）。理解这两种场景的区别，可以有效避免常见的DOMException错误，并确保视频能够顺利播放。务必检查文件路径、MIME类型以及在URL.createObjectURL场景下及时释放资源。
