reactjs 如何< img>向video标记的poster参数添加标记

yi0zb3m4 于 2023-03-17 发布在 React

关注(0)|答案(1)|浏览(146)

我基本上是将图像从另一台服务器传输到我的机器上，并将它们作为base64编码的图像存储在localStorage中（如下所示：〈img src=“数据：图像/*;base64，/9 j/4AAQSkZJRgAgAAAQAD//...../〉）.我怎样才能将这张图片嵌入为视频海报呢？我发现我可以做这样的事情：

<video controls width="500" height="300" poster={my image here}>
                 <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"></source>

但是我不确定如何用我的localStorage中的图像格式来做。

reactjs

来源：https://stackoverflow.com/questions/75764355/how-can-i-add-a-img-tag-to-the-poster-parameter-of-the-video-tag

1条答案

按热度按时间

5f0d552i1#

您可以简单地在video标签的poster属性中使用数据URI方案，如下所示：

// Assuming you have the base64-encoded image stored in a variable called "imageData"

const video = document.createElement('video');
video.controls = true;
video.width = 500;
video.height = 300;
video.poster = `data:image/*;base64,${imageData}`;

const source = document.createElement('source');
source.src = 'https://www.w3schools.com/tags/movie.mp4';
source.type = 'video/mp4';

video.appendChild(source);

// Add the video element to the DOM wherever you need it

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 如何< img>向video标记的poster参数添加标记

1条答案

相关问题

热门标签

最新问答