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:207554browse

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.

How to implement play and pause in html

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn