本教程旨在解决在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-uuidvideo.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），最直接且有效的方法是将其路径设置为元素的src属性。以下是使用JavaScript动态创建视频元素并加载本地视频的步骤：
1. 创建视频（
首先，我们需要在文档中创建一个
var videoElement = document.createElement("video");// 可以设置一些视频属性，例如控制条、自动播放等videoElement.controls = true; // 显示播放控制条// videoElement.autoplay = true; // 自动播放// videoElement.loop = true; // 循环播放
2. 创建源（）元素
为了指定视频文件的来源和类型，我们需要创建一个元素，并将其作为子元素添加到
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); // 将视频添加到文档的中
完整示例代码
结合上述步骤，完整的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. 创建
为了运行上述代码，您需要一个HTML文件，例如index.html，以及一个名为video.mp4的视频文件（或您指定的其他文件）。
JavaScript 播放本地视频教程 使用 JavaScript 动态播放本地视频
URL.createObjectURL 的正确应用场景
虽然上述方法适用于直接通过路径访问的本地文件，但在某些情况下，URL.createObjectURL 仍然非常有用，例如：
用户上传的文件： 当用户通过选择文件时，您会获得一个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中播放本地视频文件，关键在于正确地指定视频源。对于可以直接通过路径访问的文件，应直接将路径赋值给元素的src属性。而URL.createObjectURL()则适用于处理已存在于内存中的二进制数据（如用户上传的文件或通过网络获取的Blob数据）。理解这两种场景的区别，可以有效避免常见的DOMException错误，并确保视频能够顺利播放。务必检查文件路径、MIME类型以及在URL.createObjectURL场景下及时释放资源。
以上就是如何在JavaScript中流式播放本地视频文件的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1599547.html
微信扫一扫 
支付宝扫一扫 
