html5中关于音频与视频应用的示例详解

来源：动视网责编：小采时间：2020-11-27 15:07:07

html5中关于音频与视频应用的示例详解

html5中关于音频与视频应用的示例详解:一介绍1、<audio>和<video>元素有不少监听事件，因此可以绑定这些事件的。2、本应用实现<video>的ontimeupdate事件的。3、通过ontimeupdate事件绑定可以实时监控音频、视频的播放位置。二代码<!DOCTY

推荐度：

点击下载本文 文档为doc格式

导读html5中关于音频与视频应用的示例详解:一介绍1、<audio>和<video>元素有不少监听事件，因此可以绑定这些事件的。2、本应用实现<video>的ontimeupdate事件的。3、通过ontimeupdate事件绑定可以实时监控音频、视频的播放位置。二代码<!DOCTY

一介绍

1、<audio>和<video>元素有不少监听事件，因此可以绑定这些事件的。

2、本应用实现<video>的ontimeupdate事件的。

3、通过ontimeupdate事件绑定可以实时监控音频、视频的播放位置。

二代码

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 视频播放 </title>
</head>
<body>
<h2> 视频播放 </h2>
<video id="mv" src="movie.webm" loop>
您的浏览器不支持video元素
</video><br/>
<input id="bn" type="button" value="播放"/><span id="detail"></span>秒
<script type="text/javascript">
	var bn = document.getElementById("bn");
	var mv = document.getElementById("mv");
	var detail = document.getElementById("detail");
	// 为video元素的ontimeupdate事件绑定
	mv.ontimeupdate = function()
	{
	detail.innerHTML = mv.currentTime + "/" 
	+ mv.duration;
	};
	bn.onclick = function()
	{
	if(mv.paused)
	{
	mv.play();
	bn.value = "暂停";
	}
	else
	{
	mv.pause();
	bn.value = "播放";
	}
	}
</script>
</body>
</html>

三运行结果

html5中关于音频与视频应用的示例详解

推荐度：

点击下载本文 文档为doc格式

标签：视频视频的应用

热门焦点

html5中关于音频与视频应用的示例详解

html5中关于音频与视频应用的示例详解

html5中关于音频与视频应用的示例详解

最新推荐

猜你喜欢

热门推荐