HTML5高级之多媒体（视频、音频）

最新推荐文章于 2024-04-15 13:51:40 发布

猫爷001

最新推荐文章于 2024-04-15 13:51:40 发布

阅读量554

点赞数

分类专栏： HTML5 文章标签： HTML5 Video Audio

本文链接：https://blog.csdn.net/maoye198602102339/article/details/82898055

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

视频处理 Video

Video 元素

--Video元素可以进行简单的视频播放功能，这个元素只有几个属性，包括属性和默认设置

--Video元素中可以包含source元素，这些元素为浏览器提供了不同是视频源，浏览器根据source标签，然后根据所支持的格式，选择播放的文件

语法：

</video>

Video 属性

--controls 该属性是video特有属性，用于浏览器提供视频控件按钮

--autoplay 加载视频自动播放

--loop 反复播放

--poster 指定一个url，在视频等待播放时显示的图像

--preload 有三个值可选

（1）none 不缓存视频

（2）metadata 推荐浏览器抓取一些资源信息

（3）auto 默认值，要求浏览器尽快的下载视频

语法：video id = "medios" width = "300" controls loop poster = "images/4.jpg"></video>

事件API

--progress 更新媒体下载进度，会周期性的触发

--canplaythrough 整个每天可以顺利播放时，触发这个事件

--canplay 不考虑整体状态，只要下载了一定的可放映的帧会触发这个事件

--ended 媒体到末尾时触发

--pause 媒体暂停时触发

--play 媒体播放时触发

--error 媒体播放出错时触发

一些事件的使用：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>video</title>
	<style type="text/css">
		#div{position: absolute;left: 200px;top: 100px;display: none;}
	</style>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		function init(){
			media = $("media");
			div = $("div");
			media.addEventListener("canplaythrough", media_canplay,false);
			media.addEventListener("play", media_play,false);
			media.addEventListener("pause", media_pause,false);
		}
		function media_canplay(e){
			console.log("media_canplay");
		}
		function media_play(e){
			div.style.display = "none";
		}
		function media_pause(e){
			div.style.display = "block";
		}
		window.addEventListener("load",init,false);
	</script>
</head>
<body>
	<div id="div">
		<img src="123.png">
	</div>
	<video width="600" height="400" controls id="media">
		<source src="05 输出输入小结(1).mp4">
	</video>
</body>
</html>

方法

--play（）媒体播放

--pause（）媒体暂停

--load（）加载媒体文件，动态应用程序可使用该方法提前加载

--canPlayType（）查看浏览器是否支持这种文件格式的媒体文件

返回值：

（1）probably 浏览器最可能支持该视频

（2）maybe 浏览器可能支持该视频

（3）- 浏览器不支持该视频

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>验证是否支持MP4格式的视频文件</title>
	<script type="text/javascript">
		function $(id){
			return document.getElementById(id);
		}
		function init(){
			var btnMp4 = $("btnMp4");
			btnMp4.addEventListener("click",btnMp4_click,false);
		}
		function btnMp4_click(e){
			var video = document.createElement("video");
			var ret = video.canPlayType("video/mp4");
			if(ret == "-"){
				window.alert("不支持该格式的视频！");
			}else {
				window.alert("这种视频是可以的！");
			}
		}
		window.addEventListener("load",init,false);
	</script>
</head>
<body>
	<input type="button" name="btn" id="btnMp4" value="click me">
</body>
</html>

属性

html5新增媒体处理方法：

--paused 媒体处于暂停或未播放状态下，这个值为true

--ended 媒体已经结束播放，这个值为true

--duration 返回媒体时长，以秒为单位

--currentTime 获取或设置媒体播放位置

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>html5视频属性应用</title>
	<script type="text/javascript">
		function $ (id) {
			return document.getElementById(id);
		}
		function init(){
			video = $("media");
			videoTime = $("videoTime");
			btn = $("btn");
			btn.addEventListener("click",btn_click,false);
			video.currentTime = 400;//设置播放的开始位置为400秒的地方
			getVideoTime(video,videoTime);
		}
		//获取视频的时长
		function getVideoTime(v,res){
			var time = v.duration;
			res.innerHTML = time/60 +"s";

		}
		function btn_click(e){
			//视频在暂停或未播放时，视频播放结束时
			if (video.paused || video.enden) {
				//1，视频播放   2，按钮字改成暂停
				video.play();
				e.target.value = "暂停";
			}else{
				video.pause();
				e.target.value = "播放";
			}
		}
		window.addEventListener("load",init,false);
	</script>
</head>
<body>
	<video id="media" width="600" height="400">
		<source src="05 输出输入小结(1).mp4">
	</video>
	<div>
		<input type="button" name="btn" id="btn" value="播放">
	</div>
	<div id="videoTime"></div>
</body>
</html>

以上就是视频处理的一些用法，Audio音频处理跟视频处理大同小异的，这里就不记录了

猫爷001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5高级之多媒体（视频、音频）

视频处理 Video Video 元素--Video元素可以进行简单的视频播放功能，这个元素只有几个属性，包括属性和默认设置--Video元素中可以包含source元素，这些元素为浏览器提供了不同是视频源，浏览器根据source标签，然后根据所支持的格式，选择播放的文件语法：&lt;video id = "medios" width = "300"&gt;...
复制链接

扫一扫

专栏目录