用video 标签播放 websocket 返回的视频流
时间: 2023-11-18 21:41:34 浏览: 52
要在 web 页面中使用 WebSocket 返回的视频流,可以使用 JavaScript 中的 WebSocket API 和 HTML5 的 video 标签来实现。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Video Stream Demo</title>
</head>
<body>
<video id="videoPlayer" autoplay controls></video>
<script>
var websocket = new WebSocket("wss://example.com/video-stream");
websocket.onmessage = function(event) {
var videoPlayer = document.getElementById("videoPlayer");
var videoBlob = new Blob([event.data], { type: "video/mp4" });
var videoURL = URL.createObjectURL(videoBlob);
videoPlayer.src = videoURL;
};
</script>
</body>
</html>
```
在这个例子中,我们创建了一个 WebSocket 对象并连接到了一个 URL 地址 `wss://example.com/video-stream`。当 WebSocket 接收到消息时,我们将消息数据存储为一个 Blob 对象,并使用 URL.createObjectURL() 方法将其转换为一个可用于 video 标签的 URL 地址。最后,我们将 video 标签的 src 属性设置为这个 URL,以便播放视频。