Home > Article > Web Front-end > How to implement play and pause in html
How to implement play and pause in html
- 醉折花枝作酒筹Original
- 2021-06-07 11:48:207533browse
In HTML, you can use the play method to play the current audio or video, and the pause method to pause the current audio or video. The syntax format is "element object.play()/pause()". These two methods are often used together, and video controls can be displayed using the controls property.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
play() method starts playing the current audio or video.
All major browsers support the play() method.
Note: Internet Explorer 8 and earlier versions do not support this method.
pause() method stops (pauses) the currently playing audio or video.
Tip: This method is usually used with the play() method.
Tip: Use the controls attribute to display video controls (such as play, pause, search, volume, etc.).
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>播放与暂停</title>
<script type="text/javascript">
var videoEl=null;
function Play(){
videoEl.play(); /* 播放视频 */
}
function Pause(){
videoEl.pause(); /* 暂停播放 */
}
window.onload=function(){
videoEl=document.getElementById("myPlayer");
}
</script>
</head>
<body>
<video id="myPlayer" src="resources/video.mp4" width="600" controls>
你的浏览器不支持video元素
</video><br>
<div id="time"></div>
<input type="button" value="播放" onclick="Play()" />
<input type="button" value="暂停" onclick="Pause()" />
</body>
</html>Recommended learning: html video tutorial
The above is the detailed content of How to implement play and pause in html. For more information, please follow other related articles on the PHP Chinese website!