在今天的網(wǎng)頁設(shè)計中，視頻的應(yīng)用已經(jīng)不再新奇，尤其是對于商業(yè)、影視等大型網(wǎng)站，視頻已經(jīng)成為展示產(chǎn)品或者作品的重要手段。在這些網(wǎng)站開發(fā)過程中，經(jīng)常需要用到切換視頻的功能，而Javascript的強大功能可以讓這一切變得輕松便捷。

先來看一個例子，一個銀行網(wǎng)站需要在首頁播放一段宣傳視頻，但是這段視頻時間很長，很有可能會讓用戶失去耐心，所以需要設(shè)計師在頁面上放置三個小按鈕，分別是“視頻1”、“視頻2”、“視頻3”，用戶點擊按鈕之后，頁面上的視頻會順序切換到指定視頻。在Javascript中，需要用到媒體控制API，以及常規(guī)的DOM操作，以下是代碼實現(xiàn)：

var video1 = document.getElementById("video1");
var video2 = document.getElementById("video2");
var video3 = document.getElementById("video3");
var btn1 = document.getElementById("btn1");
btn1.onclick = function() {
video1.style.display = "block";
video2.style.display = "none";
video3.style.display = "none";
};
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
video1.style.display = "none";
video2.style.display = "block";
video3.style.display = "none";
};
var btn3 = document.getElementById("btn3");
btn3.onclick = function() {
video1.style.display = "none";
video2.style.display = "none";
video3.style.display = "block";
};

以上代碼首先獲取頁面上三個視頻元素和三個按鈕元素，然后通過onclick事件監(jiān)聽每個按鈕的點擊事件。當用戶點擊“視頻1”按鈕時，將視頻1顯示出來，將視頻2和視頻3隱藏；當用戶點擊“視頻2”按鈕時，將視頻2顯示出來，將視頻1和視頻3隱藏；當用戶點擊“視頻3”按鈕時，將視頻3顯示出來，將視頻1和視頻2隱藏。界面更新的效果如下圖所示：

再看一個例子，一個電商網(wǎng)站需要為每個商品添加一段介紹視頻，并且需要在視頻上方放置一個mini播放器，當用戶點擊播放按鈕時，視頻開始播放，而原來的若干個商品介紹視頻則自動停止。在這個新的需求中，需要使用到“自動暫停播放”、“獲取元素位置”和“設(shè)置元素位置”的Javascript方法，具體代碼如下：

var videos = document.querySelectorAll(".video");
var videoPlayer = document.getElementById("videoPlayer");
for (var i = 0; i< videos.length; i++) {
videos[i].addEventListener("click", function() {
videoPlayer.pause();
var x = this.getBoundingClientRect().left;
var y = this.getBoundingClientRect().top;
videoPlayer.style.left = x + "px";
videoPlayer.style.top = y + "px";
videoPlayer.src = this.dataset.src;
videoPlayer.play();
});
}

以上代碼首先獲取頁面上所有的視頻元素，然后為每個視頻添加一個點擊事件。當用戶點擊某個視頻時，代碼將暫停所有的視頻播放，并獲取當前視頻相對于頁面左上角的位置坐標，然后將mini播放器的位置設(shè)置為當前視頻位置，同時將mini播放器的視頻設(shè)置為當前視頻的源，并開始播放。界面更新的效果如下圖所示：

通過以上兩個實例，可以看出Javascript在實現(xiàn)視頻切換功能上的獨到之處，而且這個功能相對其他語言實現(xiàn)起來非常簡單、高效。當然，如果需要更加復(fù)雜的視頻切換功能，比如視頻緩存、視頻轉(zhuǎn)換、視頻特效等等，Javascript也提供了相應(yīng)的庫和插件，可以大大減少開發(fā)者的工作量，提高開發(fā)效率。