在現代的web開發中，JavaScript已成為不可或缺的一部分。其中，JavaScript可以通過不同的APIs和庫來控制各種不同的媒體類型，包括視頻。今天我們將探討JavaScript如何在web應用程序中使用視頻流。

當我們想要在web應用程序中顯示視頻時，我們有兩個主要類型的視頻：靜態和流式。靜態視頻文件是完整的、事先錄制好的視頻文件。與之相反，視頻流是指動態提供的視頻，通常是實況視頻。這些視頻是在發送給客戶端的同時，由服務器動態生成。

靜態視頻的顯示

如果你想要在web應用程序中顯示一個靜態的視頻，那么你可以創建一個video元素，并將音頻源和視頻源分別指向音頻和視頻文件。

<code>
<video controls>
<source src="https://example.com/video.mp4" type="video/mp4">
<source src="https://example.com/video.ogg" type="video/ogg">
</video>
</code>

上述代碼中，我們在video標簽內嵌入兩個source標簽，分別指向mp4和ogg格式的視頻文件。如果客戶端設備支持其中一個文件格式，那么就會自動播放這個視頻。

視頻流的顯示

要在web應用程序中顯示一個視頻流，你可以使用WebRTC或Media Source Extensions來動態生成一個流式視頻。在這兩個選項中，使用Media Source Extensions更加靈活，因為它除了可以顯示實況視頻流外，還可以顯示已預先錄制的視頻流。

在Media Source Extensions中，你可以創建一個MediaSource對象，并將其附加到一個HTML5 video元素上。通過MediaSource對象，你可以動態添加binary data到video元素。下面的代碼片段展示了如何在Media Source Extensions中動態顯示一個視頻流：

<code>
var mediaSource = new MediaSource();
var video = document.createElement('video');
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function(e) {
var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
fetch('https://example.com/my_video.mp4')
.then(response => response.arrayBuffer())
.then(function(data) {
sourceBuffer.appendBuffer(data);
});
video.play();
});
</code>

上面的代碼片段創建了一個MediaSource對象，并將其源添加到video元素上。在sourceopen事件中，會將video/mp4文件添加到sourceBuffer中動態顯示視頻流。

結論

在JavaScript中，我們可以使用不同的API、庫和框架來控制各種不同的媒體類型，包括靜態和流式視頻。靜態視頻是指已經錄制好的視頻文件，可以使用video元素直接顯示；流式視頻是指實時生成的視頻流，可以使用WebRTC或Media Source Extensions動態顯示。在實際應用中，我們可以根據具體需求，選擇最適合自己的視頻控制方法。