在網頁設計中,很多時候需要向用戶展示視頻,而且不僅僅是一個視頻,我們需要提供多個選項供用戶選擇。這時候,就需要利用HTML代碼實現視頻的切換功能。
首先,我們需要準備一些視頻文件,可以通過一些免費視頻網站下載,比如「優酷」、「愛奇藝」等。我們將這些視頻文件保存在本地,記住路徑。
接下來,我們在HTML代碼中添加預定義區塊(pre)標簽,用于嵌入我們的JavaScript代碼。我們可以在這里實現一個函數,用于切換視頻播放。
這個函數需要接收一個參數,這個參數是視頻文件的路徑。我們可以利用JavaScript提供的「播放器控件」,將這個路徑傳遞過去,就可以播放這個視頻。
代碼如下:
function playVideo(filePath) {
document.getElementById("myPlayer").src = filePath;
}
這樣,我們就可以通過這個函數切換視頻的播放了。其中,「myPlayer」是我們在HTML頁面中定義的播放器控件ID。
在頁面上,我們需要提供多個選項供用戶切換視頻。我們可以利用HTML的「a」標簽,在頁面上創建多個鏈接,每個鏈接分別對應一個視頻文件的路徑。這樣,當用戶點擊鏈接時,就會調用我們的函數,切換視頻播放了。
代碼如下:<a href="javascript:playVideo('video1.mp4')">視頻1</a>
<a href="javascript:playVideo('video2.mp4')">視頻2</a>
<a href="javascript:playVideo('video3.mp4')">視頻3</a>
以上就是實現視頻的切換功能的簡單代碼實現。通過這個方法,我們可以提供多個視頻選項供用戶選擇,提高用戶體驗。
代碼下載鏈接:https://github.com/codingtrain/html-starter-files/tree/master/video-switching