Html5 video 标签 src 用数据流方式播放视频

在HTML5中，可以使用MediaSource API和URL.createObjectURL方法来使用数据流播放视频。以下是一个简单的示例，展示如何使用数据流播放视频：




<!DOCTYPE html>
<html>
<head>
<title>Video Streaming with MediaSource Extensions</title>
</head>
<body>
 
<video id="video" controls></video>
 
<script>
// 获取 video 元素
var video = document.getElementById('video');
 
// 创建一个 MediaSource 对象
var mediaSource = new MediaSource();
 
// 设置视频源
video.src = URL.createObjectURL(mediaSource);
 
// 等待 MediaSource 对象被加载
mediaSource.addEventListener('sourceopen', function(e) {
    // 获取一个SourceBuffer
    var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
    
    // 这里你可以从服务器获取视频数据，然后使用 sourceBuffer.appendBuffer 方法加入数据
    // 示例中我们直接使用静态的视频数据
    fetch('video-data.webm')
        .then(response => response.arrayBuffer())
        .then(buffer => {
            sourceBuffer.addEventListener('updateend', function() {
                if (!sourceBuffer.updating) {
                    mediaSource.endOfStream();
                }
            });
            sourceBuffer.appendBuffer(buffer);
        });
});
</script>
 
</body>
</html>

在这个例子中，我们首先创建了一个MediaSource对象，并将其设置为视频元素的源。然后，我们监听sourceopen事件以便在加载后获取一个SourceBuffer。在SourceBuffer准备好后，我们从服务器获取视频数据，并使用appendBuffer方法将其加入播放队列。最后，当数据加入完成后，我们调用mediaSource.endOfStream()来通知视频播放已经结束。

注意：实际应用中，视频数据需要使用对应的编码方式和格式，并且需要服务器支持分段传输。上面的代码示例假设视频数据已经存在于video-data.webm文件中，并且视频编码为VP8。根据实际情况，你可能需要修改sourceBuffer的类型来匹配你的视频格式。

Html5 video 标签 src 用数据流方式播放视频

评论已关闭

推荐阅读