如何在HTML5视频中打开blob:url
在HTML5视频中打开blob:url，可以通过以下步骤实现：
- 创建一个Blob对象：使用JavaScript的Blob构造函数，将视频数据转换为Blob对象。Blob对象是二进制数据的容器，可以表示视频、音频、图像等多媒体数据。
- 创建一个URL对象：使用JavaScript的URL.createObjectURL()方法，将Blob对象转换为URL对象。URL对象是一个指向Blob对象的URL地址。
- 创建一个video元素：在HTML中使用video标签创建一个video元素，用于显示视频内容。
- 设置video元素的src属性：将URL对象的地址赋值给video元素的src属性，以加载视频。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Open blob:url in HTML5 video</title>
</head>
<body>
<video id="myVideo" controls></video>
<script>
// 1. 创建一个Blob对象
var videoData = /* 视频数据 */;
var blob = new Blob([videoData], { type: 'video/mp4' });
// 2. 创建一个URL对象
var url = URL.createObjectURL(blob);
// 3. 创建一个video元素
var video = document.getElementById('myVideo');
// 4. 设置video元素的src属性
video.src = url;
</script>
</body>
</html>在上述示例中，你需要将/* 视频数据 */替换为实际的视频数据。视频数据可以是二进制数据、Base64编码的数据或者通过Ajax请求获取的数据。
这种方法适用于在HTML5视频中动态加载和显示来自服务器或其他来源的视频数据。它的优势是可以避免直接暴露视频文件的URL地址，提高安全性。它适用于各种场景，例如视频编辑、视频上传、视频流媒体等。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云对象存储（COS）：提供可扩展的云存储服务，适用于存储和管理大规模的非结构化数据。详情请参考：腾讯云对象存储（COS）
- 腾讯云点播（VOD）：提供高效、稳定的音视频处理和分发服务，适用于视频点播、直播录制、在线教育等场景。详情请参考：腾讯云点播（VOD）
- 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种计算场景和工作负载。详情请参考：腾讯云云服务器（CVM）
- 腾讯云内容分发网络（CDN）：提供全球加速的内容分发网络，加速静态和动态内容的传输，提升用户访问体验。详情请参考：腾讯云内容分发网络（CDN）
相关·内容
1回答
如何阻止在新选项卡中打开视频blob url？
javascript、url、tabs、blob、block
我创建了一个带有HTML5视频播放器和blob url的页面，并阻止了对下载按钮的访问，一切正常，但当我通过查看页面的代码来检索blob url时，我有一个问题，我将blob url粘贴到一个新的选项卡中，我可以使用下载按钮在播放器中观看视频。用于生成blob url的脚本的url：set video objects source file to a bl
浏览 81提问于2021-10-28得票数 0
1回答
如何在HTML5视频中打开blob:url
html、html5-video
所以我想从另一个网站添加一个HTML5视频对象到我的网站。在一些网站上，我可以直接从src复制URL，但在另一些网站上，我不能--因为blob。我试图复制整个对象，但在我的网站上没有显示任何内容。我在一个网站上试了试，这个网站让你可以(合法)访问很多电视频道和电影，我注意到他们使用的是经典的HTML5视频播放器，所以我想我可以把它嵌入到我的网站上。我在其他网站上做到了这一点--我甚至可以左键点击视频对象，然后点击“在新标签中打
浏览 29提问于2019-02-13得票数 1
2回答
如何在ReactJS中预览视频
javascript、reactjs、antd、ant-design-pro
我工作在ReactJS的项目，目前我正在使用蚂蚁设计文件上传.当用户选择视频时，我想预览视频。我是新手，无法完成我的任务。有谁能帮我预览一个视频吗？我将与您分享我的代码，您可以检查我的代码。
浏览 1提问于2018-12-05得票数 10
1回答
为存储在Google Appengine数据存储上的实体创建URL
java、google-app-engine、video-streaming、html5-video
我在数据存储上存储了一堆Blob类型的实体。它们中的每一个都存储视频数据字节。我打算使用video的HTML5标记来显示视频，但我找不到任何为Blob创建URL的方法。有什么建议吗？
浏览 2提问于2012-11-23得票数 1
回答已采纳
1回答
HTML5视频:具有Blob的流视频
javascript、html、video、html5-video、blob
每个Blob包含1秒的音频/视频数据。每秒钟都会生成一个新的Blob并将其附加到我的数组中。HTML5元素中。我知道可以生成一个Blob URL，并按如下方式播放：var video = document.getElementsByTagName我还假设我可以以某种方式将当前数组中的所有小块串连在一起，以便播放
浏览 2提问于2018-05-14得票数 22
回答已采纳
1回答
Youtube Blob urls在浏览器中不起作用，而是在src中工作
javascript、url、blob、fileapi、media-source
我知道没有blob urls，只有对象。
当我打开youtube视频src (blob url)的url到一个新的选项卡时，它没有工作，但是我的视频s
浏览 4提问于2015-06-28得票数 14
回答已采纳
5回答
什么是blob URL ?为什么要使用它？
html5-video、bloburls
我有很多关于blob URL的问题。我在YouTube上搜索视频标签的src，发现视频的src是这样的：我打开了视频的src中的blob URL，它给出了一个错误。我无法打开该链接，但它可以使用src标记。这怎麽可能？什么是blob URL？为什么使用它？
浏览 2184提问于2015-06-16得票数 509
回答已采纳
1回答
在Safari的视频对象中显示在WebRTC中录制的视频
javascript、safari、webrtc
当使用WebRTC直接从用户摄像头录制视频时，您会获得一个带有视频的BLOB对象。video.src = window.URL.createObjectURL(blob); 当尝试将blob应用于视频元素时(例如，使用上面的代码或其他替代方案，如webkitURL等)。如此处所示( https://stackoverflow.com/a/59934597/311188)，它在Safari中</e
浏览 31提问于2021-06-21得票数 1
1回答
将blob设置为用于设备的HTML 5视频标记的src属性
javascript、ios、html5-video、blob、mobile-devices
我试图通过将HTML5视频标记的src属性设置为Blob (使用createObjectURL(blob)函数)来播放视频。它似乎在台式机上工作得很好，但在设备上却没有工作。以下是代码的流程：
然后使用createObjectURL( Blob )为blo
浏览 5提问于2014-05-07得票数 6
1回答
当尝试下载某些视频时，它重定向到一个新的URL，然后视频开始播放。“可弃内容类型”未从服务器接收。
vue.js、nginx、video、axios、content-type
我想下载某些视频点击。为此，我创建了一个Button并附加了一个应该触发相关视频下载的函数。但我只能下载视频的链接，而不是视频。我可以用外部下载器下载视频，或者简单地将URL拖到浏览器的下载部分。我尝试了多种方法来解决这个问题：const blob = new Blob([this.src_url], { type: 'video/mp4' })
浏览 11提问于2022-10-27得票数 0
2回答
显示来自Blob Javascript的视频
javascript、html、video、blob
我想在HTML5视频标签中显示来自Javascript Blob/File对象的视频。此代码仅适用于小视频：reader.onload = function(e) { }我不能在大视频(> 10MB)中使
浏览 2提问于2013-01-14得票数 42
回答已采纳
1回答
如何设置blob数据的下载文件扩展名
javascript、html、google-chrome、video、blob
在我的站点视频中使用blob数据，当下载视频时，保存的文件名是Chrome中带有.txt(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.txt)扩展的blob名称，而在火狐中是带有.mp4(4671addc-3ce0-4eb6-b414-ddf3406b1fe5.mp4)扩展的blob名称。"video" filename="111.
浏览 26提问于2022-03-31得票数 0
回答已采纳
1回答
防止通过检查元素下载html5视频
javascript、html、video、youtube
在我们的项目中有一个模块，其中有一个上传mp4视频的选项，我们使用html5视频标签播放器来播放视频。为了做到这一点，我进行了大量的研究，并通过youtube视频获得了关于blob url的想法，这些视频无论如何都是不可访问的。我试着研究了blob- url，为我的视频url创建了一个，但是它们仍然是可访问的，并且可以很容易地下载。就像youtube的blob <
浏览 5提问于2015-08-03得票数 3
1回答
如何下载(或作为blob)用于流MediaSource视频的HTML5？
html、html5-video、mp4、media-source
我正在通过一个MP4将一个动态生成的WebSocket流到网页中。当片段进来时，我组装了一个MediaSource ()，将其用于HTML5视频元素，而我的视频在所有主要浏览器中都播放得很好。我想做的是增加用户下载这个视频的能力。我的第一次尝试是看看是否可以通过我用video.src设置的window.URL.createObjectURL(my_media_source)属性访问它。此URL是表单"blob:null/abb348
浏览 0提问于2018-06-19得票数 7
回答已采纳
1回答
我无法查看录制视频的总长度和时间线
video、html5-canvas、webrtc、blob、recordrtc
技术堆栈: Angular 7，HTML5，Microsoft Azure Blob Storage，RecordRTC我正在尝试使用HTML5视频标签录制视频，该标签使用RecordRTC以Blob格式存储到本地存储中然而，当播放相同的视频时，我无法查看录制的视频的总长度和时间线。如有任何帮助或建议，将不胜感激。
浏览 54提问于2020-03-27得票数 1
回答已采纳
2回答
Safari:无法从blob url动态加载视频
javascript、html5-video、blob
我正在尝试实现html5视频标记的动态加载。 window.URL = window.URL || window.webkitURL;
varblobURL = window.<
浏览 3提问于2013-09-30得票数 6
回答已采纳
1回答
如何修复视频元素播放黑屏代替视频
javascript、google-chrome、google-chrome-extension、html5-video
我的视频元素的src是一个视频录制的blob URL (mediaRecorder应用程序接口)。当我点击播放时，它显示了一个黑屏，而不是播放视频。当我将视频元素打印到控制台，右键单击源并单击“在新选项卡中打开”时，视频将在新选项卡中播放。 这是一个chrome扩展，我正在录制一个视频(通常3-5秒长)，然后尝试在视频元素中播放相同的视频。&#x
浏览 19提问于2019-06-10得票数 2
回答已采纳
2回答
如果Blob是不可变的，那么如何使用它们来流视频呢？
javascript、html、browser、media-source
让我们从一个例子开始：
但是，最初附加到元素的blob (应该表示Media对象)仍
浏览 4提问于2019-02-10得票数 5
回答已采纳
1回答
不呈现PDF小块
javascript、html、asp-classic
这里的关键问题是，我在客户端生成PDF -这意味着没有服务器端URL来加载PDF。这就要求我使用blobs或数据表，IE不会因为某些奇怪的原因而呈现其中的任何一个。正在打印的数据也非常特殊地定位于打印在其上的表单，这意味着我不能将PDF呈现到画布中，而只是打印画布元素，因为这样会在页面上留下额外的页边距和URL和页码。我以前使用过PdfObject，但是IE中的blobs和dataurls仍然存在相同的问题。这个网站的后端是经典的ASP (它正在.Net中重做，但它最早要到下一个时间才能使用)--是否可以
浏览 7提问于2014-10-09得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
