本文旨在解决javascript中动态加载本地视频文件时遇到的常见问题，特别是当尝试使用`url.createobjecturl`结合字符串路径创建blob时导致的播放失败。我们将详细介绍如何通过原生javascript动态创建和配置`
在现代Web开发中，经常需要动态地在网页上展示视频内容。虽然HTML提供了<video>标签用于此目的，但通过JavaScript动态控制视频加载和播放时，可能会遇到一些挑战。一个常见的误区是尝试使用URL.createObjectURL方法来处理本地视频文件的路径字符串，这通常会导致DOMException: The element has no supported sources.错误。
理解常见的播放错误原因
原始问题中尝试的代码如下：
var URL = this.window.URL || this.window.webkitURL;
var file = new Blob(["./video.mp4"], {"type": "video\/mp4"});
var value = URL.createObjectURL(file);
console.log(value);
video.src = value;这段代码的核心问题在于new Blob(["./video.mp4"], {"type": "video\/mp4"})。这里创建的Blob对象并非包含video.mp4文件的实际二进制数据，而是包含一个名为"./video.mp4"的字符串。URL.createObjectURL随后为这个包含字符串的Blob生成一个URL。当浏览器尝试播放这个URL时，它发现该URL指向的不是有效的视频数据流，因此抛出DOMException: The element has no supported sources.错误。
URL.createObjectURL的正确用法是当您已经拥有了文件的二进制数据（例如，通过FileReader读取用户选择的文件，或通过fetch API获取的响应体blob()方法）时，为这些二进制数据创建一个临时的、可访问的URL。对于直接引用服务器上或本地文件系统中的视频文件，我们应该直接使用其路径。
立即学习“Java免费学习笔记（深入）”；
正确的动态加载和播放本地视频方法
要正确地通过JavaScript动态加载和播放一个位于服务器可访问路径下的视频文件（例如，与HTML文件同目录的video.mp4），最直接且有效的方法是动态创建HTML <video> 和 <source> 元素，并将视频文件的路径直接赋给 <source> 元素的 src 属性。
以下是实现这一功能的详细步骤和示例代码：
步骤一：创建 <video> 元素
首先，我们需要创建一个HTML <video> 元素。这个元素将作为视频播放器的主体。
var videoElement = document.createElement("video");
// 可选：设置视频播放器的控制条
videoElement.controls = true;
// 可选：设置视频宽度，例如：
// videoElement.width = 640;
// videoElement.height = 360;步骤二：创建 <source> 元素并设置视频源
接着，创建一个 <source> 元素。这个元素用于指定视频文件的路径和媒体类型。<video> 元素可以包含多个 <source> 元素，以便为不同的浏览器或设备提供不同格式的视频。
var sourceElement = document.createElement("source");
sourceElement.setAttribute('src', 'video.mp4'); // 设置视频文件路径
sourceElement.setAttribute('type', 'video/mp4'); // 声明视频的MIME类型重要提示： src 属性的值应该是视频文件在服务器上或相对于HTML页面的可访问路径。
步骤三：将 <source> 元素添加到 <video> 元素
将创建好的 <source> 元素作为子元素添加到 <video> 元素中。
videoElement.appendChild(sourceElement);
步骤四：将 <video> 元素添加到文档流中
最后，将完整的 <video> 元素（包含其 <source> 子元素）添加到HTML文档的某个位置，例如 <body> 标签中。
document.body.appendChild(videoElement);
完整示例代码
将上述步骤整合，可以得到如下简洁的代码：
// 获取或创建视频容器（如果需要，例如 div#video-container）
// const videoContainer = document.getElementById('video-container') || document.body;
// 1. 创建 <video> 元素
var videoElement = document.createElement("video");
videoElement.controls = true; // 显示播放控制条
// videoElement.autoplay = true; // 注意：现代浏览器通常会阻止没有用户交互的自动播放
// videoElement.loop = true; // 循环播放
// 2. 创建 <source> 元素
var sourceElement = document.createElement("source");
sourceElement.setAttribute('src', 'video.mp4'); // 假设 video.mp4 在与 HTML 文件相同的目录下
sourceElement.setAttribute('type', 'video/mp4'); // 指定视频类型
// 3. 将 <source> 添加到 <video>
videoElement.appendChild(sourceElement);
// 4. 将 <video> 添加到文档的 body 中
document.body.appendChild(videoElement);
// 可选：添加错误监听
videoElement.addEventListener('error', function() {
console.error('视频加载或播放失败:', videoElement.error);
// 根据错误类型提供用户反馈
switch (videoElement.error.code) {
case videoElement.error.MEDIA_ERR_ABORTED:
console.log('视频加载被用户中断。');
break;
case videoElement.error.MEDIA_ERR_NETWORK:
console.log('网络错误导致视频下载失败。');
break;
case videoElement.error.MEDIA_ERR_DECODE:
console.log('视频解码失败。');
break;
case videoElement.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
console.log('视频源不支持或文件格式无效。');
break;
default:
console.log('发生未知视频错误。');
break;
}
});
console.log('视频元素已动态添加到页面。');注意事项和最佳实践
- 视频文件路径： 确保 sourceElement.setAttribute('src', 'video.mp4'); 中的路径是正确的且可访问的。如果是相对路径，它将相对于当前HTML文件的位置进行解析。如果是部署在服务器上的应用，确保视频文件在服务器上是可访问的。
-
MIME 类型： type 属性（例如 video/mp4）非常重要，它告知浏览器视频的格式，有助于浏览器快速判断是否支持该格式。常见的视频MIME类型包括：
- MP4: video/mp4
- WebM: video/webm
- Ogg: video/ogg
-
浏览器兼容性： 并非所有浏览器都支持所有视频格式。为了更好的兼容性，可以提供多个 <source> 元素，每个指定不同的视频格式，浏览器会选择它支持的第一个。
<video controls> <source src="video.webm" type="video/webm"> <source src="video.mp4" type="video/mp4"> <p>您的浏览器不支持HTML5视频。</p> </video>
在JavaScript中，可以类似地动态创建多个 <source> 元素。
- 自动播放策略： 现代浏览器（如Chrome、Safari）对视频的自动播放（autoplay属性）有严格的限制。通常情况下，只有在视频静音或用户与页面进行过交互后，视频才能自动播放。否则，视频将保持暂停状态，直到用户手动点击播放。
- 用户体验： 考虑在视频加载前显示加载指示器，并在视频加载失败时提供友好的错误消息。
- 性能： 对于大型视频文件，考虑使用流式传输（Streaming）技术或分段加载（Chunked Loading）以提高用户体验。但这通常需要服务器端的支持。
- URL.createObjectURL 的适用场景： 如果您确实需要从客户端获取的二进制数据（例如，用户通过<input type="file">选择的文件，或通过XMLHttpRequest/fetch获取的响应Blob）来播放视频，那么 URL.createObjectURL 是正确的选择。在这种情况下，Blob对象必须包含实际的视频二进制数据，而不是文件名字符串。
总结
在JavaScript中动态加载和播放本地视频文件时，关键在于正确处理视频源。对于直接引用服务器上或本地可访问路径的视频文件，应通过动态创建<video>和<source>元素，并直接将文件路径赋给<source>的src属性来实现。避免将文件名字符串封装到Blob中再使用URL.createObjectURL，因为这不会提供有效的视频数据源。遵循本文提供的指南和最佳实践，可以确保视频内容在Web应用中顺利、可靠地播放。
