資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 JavaScript 播放多媒體檔案？
在本教程中，我們將學習如何使用 JavaScript 播放多媒體檔案。
多媒體檔案包括音訊和影片檔案。多媒體檔案可以有多種格式。wav 和 mp3 是兩種音訊檔案格式的示例，而 mp4 和 mkv 是兩種影片檔案格式的示例。
在 HTML 中，可以使用不同的標籤輕鬆顯示多媒體檔案。我們使用 video 標籤顯示影片，使用 audio 標籤播放音訊。這兩個標籤非常相似，許多屬性在兩個標籤中都是相同的。“src”屬性定義了其各自檔案的路徑或 URL。還可以使用 source 標籤定義多個備用多媒體檔案資源，該標籤位於 video 或 audio 標籤內。
使用 JavaScript 播放音訊檔案
音訊檔案是包含聲音或音訊的數字檔案。在 JavaScript 中，document.getElementById() 方法可用於獲取元素的不同屬性值。它在引數中獲取元素的 id 並返回該元素的元素物件（在本例中，它是一個 audio 標籤），然後我們可以使用 play() 方法從該物件播放音訊檔案。
語法
使用者可以按照以下語法播放多媒體檔案（音訊）。
document.getElementById('myaudio').play()
在以上語法中，“myaudio” 是 audio 標籤的 id，透過使用 document.getElementById 方法，我們獲得了具有 play 方法的元素物件。
示例
在下面的示例中，我們使用了 audio 標籤在 HTML 中顯示音訊檔案，該標籤使用 source 標籤指定音訊檔案路徑或 URL。一個帶有“播放”文字的按鈕與 playAudio() 函式關聯了一個 onclick 事件。當用戶單擊該按鈕時，將執行 playAudio() 函式，並且在該函式中，我們使用 document.getElementById 方法並傳遞 audio 標籤的 id 以獲取元素物件。之後，我們呼叫 play 方法來播放音訊檔案。
<html> <body> <h3> Play a multimedia file (<i>Audio</i>) in JavaScript </h3> <div> <audio id="myaudio" controls> <!-- Use your audio path or URL in the src --> <source src="/..." type="audio/mp3"> </audio> </div> <br/> <button onclick="playAudio()">Play</button> <script> function playAudio(){ document.getElementById('myaudio').play() } </script> </body> </html>
使用 JavaScript 播放影片檔案
影片檔案是包含視覺和音訊的數字檔案。在 JavaScript 中，document.getElementById() 方法可用於獲取元素的不同屬性值。它在引數中獲取元素的 id 並返回該元素的元素物件（在本例中，它是一個 video 標籤），然後我們可以使用 play() 方法從該物件播放影片檔案。
使用者可以按照以下語法播放多媒體檔案（影片）。
語法
document.getElementById('myvideo').play()
在以上語法中，“myvideo” 是 video 標籤的 id，透過使用 document.getElementById 方法，我們獲得了具有 play 方法的元素物件。
示例
在下面的示例中，我們使用了 video 標籤在 HTML 中顯示影片檔案，該標籤使用 source 標籤指定影片檔案路徑或 URL。一個帶有“播放”文字的按鈕與 playVideo() 函式關聯了一個 onclick 事件。當用戶單擊該按鈕時，將執行 playVideo 函式，並且在該函式中，我們使用 document.getElementById 方法並傳遞 video 標籤的 id 以獲取元素物件。之後，我們呼叫 play 方法來播放影片檔案。
<html> <body> <h2> Play a multimedia file (<i>Video</i>) in JavaScript </h2> <div> <video id="myvideo" width="600" height="280"controls> <!-- Use your video path or URL in the src --> <source src="https://tutorialspoint.tw/videos/sample1080p.mp4" type="video/mp4"> </video> </div> <br/> <button onclick="playVideo()">Play</button> <script> function playVideo(){ document.getElementById('myvideo').play() } </script> </body> </html>
使用 JavaScript 控制多媒體檔案
我們已經瞭解瞭如何使用 JavaScript 播放多媒體檔案。現在，我們將瞭解如何使用 JavaScript 控制多媒體檔案。我們將控制一個影片檔案並構建諸如播放、暫停和停止之類的功能。我們將使用 document.getElementById 方法採用與之前相同的做法，但在此情況下，我們不僅將使用 play() 方法播放影片，還將使用 pause() 方法暫停影片，以及 load() 方法停止影片。
使用者可以按照以下語法控制多媒體檔案（影片）。
語法
document.getElementById('myvideo').play() // for play
document.getElementById('myvideo').pause() // for pause
document.getElementById('myvideo').load() // for stop or re-load
在以上語法中，“myvideo” 是 video 標籤的 id，透過使用 document.getElementById 方法，我們獲得了具有 play、pause 和 load 方法的元素物件。
示例
在下面的示例中，我們使用了 video 標籤在 HTML 中顯示影片檔案，該標籤使用 source 標籤指定影片檔案路徑或 URL。三個帶有“播放”、“暫停”和“停止”文字的按鈕分別與 playVideo()、pauseVideo() 和 stopVideo() 函式關聯了一個 onclick 事件。當用戶單擊這些按鈕時，將執行其各自的函式，並且我們在該函式中使用 document.getElementById 方法來獲取元素物件。之後，我們根據函式的使用呼叫 play() 或 pause() 或 load() 方法。
<html> <body> <h3> Control a multimedia file (<i>Video</i>) in JavaScript </h3> <p> Click the below buttons to control the multimedia file (video) </p> <div> <video id="myvideo" width="600" height="280"controls> <!-- Use your video path or URL in the src --> <source src="https://tutorialspoint.tw/videos/sample1080p.mp4" type="video/mp4"> </video> </div> <br /> <div> <button onclick="playVideo()">Play</button> <button onclick="pauseVideo()">Pause</button> <button onclick="stopVideo()">Stop</button> </div> <script> let video=document.getElementById('myvideo') function playVideo(){ video.play() } function pauseVideo(){ video.pause() } function stopVideo(){ video.load() } </script> </body> </html>
1K+ 次檢視
