数据结构
网络
关系数据库管理系统
操作系统
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.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() // 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.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>
1K+ 次查看
