如何使用 JavaScript 播放多媒体文件?
在本教程中，我们将学习如何使用 JavaScript 播放多媒体文件。
多媒体文件是音频和视频文件。多媒体文件可以采用不同的格式。wav 和 mp3 是音频文件格式的两个示例，而 mp4 和 mkv 是视频文件格式的示例。
在 HTML 中，可以使用不同的标签轻松显示多媒体文件。我们使用 video 标签来显示视频，对于音频，我们使用 audio 标签。这两个标签非常相似，并且两个标签中的许多属性都相同。"src"属性定义其各自文件的路径或 URL。还可以使用 source 标签定义多个交替的多媒体文件资源，该标签位于 video 或 audio 标签内。
使用 JavaScript 播放音频文件
音频文件是包含声音或音频的数字文件。在 JavaScript 中，document.getElementById() 方法可用于获取元素的不同属性值。它获取参数中元素的 id 并返回该元素的元素对象(在本例中为音频标签)，然后我们可以使用方法 play() 从该对象播放音频文件。
语法
用户可以按照以下语法播放多媒体文件(音频)。
document.getElementById('myaudio').play()
在上述语法中，"myaudio"是音频标签的 id，通过使用 document.getElementById 方法，我们获取具有 play 方法的元素对象。
示例
在下面的示例中，我们使用音频标签在 HTML 中显示音频文件，它使用源标签来指定音频文件路径或 URL。带有文本"播放"的按钮具有与函数 playAudio() 关联的 onclick 事件。当用户单击按钮时，将执行 playAudio() 函数，在该函数中，我们使用 document.getElementById 方法并传递音频标签的 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 并返回该元素的元素对象(在本例中为视频标签)，然后我们可以使用方法 play() 从该对象播放视频文件。
用户可以按照以下语法播放多媒体文件(视频)。
语法
document.getElementById('myvideo').play()
在上述语法中，"myvideo"是视频标签的 id，通过使用 document.getElementById 方法，我们获取具有 play 方法的元素对象。
示例
在下面的示例中，我们使用视频标签在 HTML 中显示视频文件，它使用源标签来指定视频文件路径或 URL。带有文本"播放"的按钮具有与函数 playVideo() 关联的 onclick 事件。当用户点击按钮时，playVideo函数将被执行，在该函数中，我们使用document.getElementById方法并传递视频标签的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://www.tutorialspoint.com/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() // 用于播放
document.getElementById('myvideo').pause() // 用于暂停
document.getElementById('myvideo').load() // 用于停止或重新加载
在上述语法中，"myvideo"是视频标签的 id，通过使用 document.getElementById 方法，我们可以使用 play、pause 和 load 方法获取元素对象。
示例
在示例中下面，我们使用 video 标签在 HTML 中显示视频文件，该标签使用 source 标签来指定视频文件路径或 URL。带有文本"播放"、"暂停"和"停止"的三个按钮分别具有与函数 playVideo()、pauseVideo() 和 stopVideo() 关联的 onclick 事件。当用户单击这些按钮时，将执行它们各自的函数，并且我们在该 function.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://www.tutorialspoint.com/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>
