HTML5音频audio和视频video用法解析

    html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!

先看一下标准化的音频(audio)标签

<audio src="YesterdayOnceMore.mp3" controls="conttrols" loop="loop" autoplay></audio>

    接下来看一下标签的属性说明,src冲接触img到外部引入的js代码,等等带src的属性标签,都很熟悉了,这个src的也无非这个用法,用来引入audio音频的文件地址,controls这个属性,出现音频元素的控制条可以修改音频播放进度,开始播放,暂停,声音调试等 loop循环播放,autoplay进行音频自动播放.

再看一下video的标准化标签

<video src="big_buck_bunny.mp4" controls="conttrols" loop="loop" poster="poster.jpg"></video>

        看到这里你发现两个标签的属性差不多相同,但是又出现了一个poster这个什么鬼,简单说一下这个poster属性就是设置video视频的封面图,在没有autoplay自动播放下,video展现黑色块,影响用户体验,此时可以使用一个封面来进行代替!

当然也可以进行js对video/audio的dom属性抓取进行方法的操作来进行代替控制条!

这里以video为例来说明

  1. 视频的播放使用play()方法
  2. //点击开始按钮播放视频 start.onclick=function(){ video.play(); }

   3. 视频暂停使用pause()方法

//点击暂停按钮停止播放
			pause.onclick=function(){
				video.pause();
			}
			//点

    4.获取当前音量volume方法

sound.onchange=function(){
				//视频对象.volume获取当前声音,范围0-1
				//alert('当前声音为:'+video.volume);
				video.volume=this.value/10;
				span.innerHTML=this.value;
				
			}

    5.获取视频在哪个位置(时间点)currentTime

add.onclick=function(){
				//获取当前播放的时间
				var now_time=video.currentTime;
				//计算快进后的播放时间点
				var new_time=now_time+3;
				//新值赋值回去
				video.currentTime=new_time;
			}

下面是使用js控制video的dom控制video的快进,播放暂停等属性完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js实现video的控制条</title>
	</head>
	<body>
		<input type="button" id="start" value="开始"/> 
		<input type="button" value="暂停" id="pause"/> 
		<input type="button" value="快进" id="add" />
		<input type="range" id="sound" value="10" min="1" max="10" step="1" />&nbsp;当前音量:<span>10</span>
		<br /><br /><br />
		<video src="big_buck_bunny.mp4" id="video" poster="poster.jpg"></video>
		<script type="text/javascript">
			//抓取video的dom
			var video=document.getElementById("video");
			var start=document.getElementById("start");
			var pause=document.getElementById("pause");
			var add=document.getElementById("add");
			var sound=document.getElementById("sound");
			var span=document.getElementsByTagName('span')[0];
			//点击开始按钮播放视频
			start.onclick=function(){
				video.play();
			}
			//点击暂停按钮停止播放
			pause.onclick=function(){
				video.pause();
			}
			//点击更改音量
			sound.onchange=function(){
				//视频对象.volume获取当前声音,范围0-1
				//alert('当前声音为:'+video.volume);
				video.volume=this.value/10;
				span.innerHTML=this.value;
				
			}
			//快进功能实现
			add.onclick=function(){
				//获取当前播放的时间
				var now_time=video.currentTime;
				//计算快进后的播放时间点
				var new_time=now_time+3;
				//新值赋值回去
				video.currentTime=new_time;
			}
		</script>
	</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Fred Liang

移动端 Web 渲染解决方案

秋招 H5 移动端(面向微信)设计师出的落地页的动画层数有30层左右,在通过 bodymovin 导入前端页面中后再加载好素材之后仍有5秒左右黑屏渲染动画 目...

20340
来自专栏用户2442861的专栏

CSS中height:100%和height:inherit的异同

2. 大多数情况作用是一样的 除去兼容性,大多数情况下,两者作用是一样的,甚至都很难想出不一样的理由。

10010
来自专栏腾讯社交用户体验设计

如何做一个让人闻风丧胆的H5 - 腾讯ISUX

18930
来自专栏腾讯社交用户体验设计

经验分享:多屏复杂动画CSS技巧三则 - 腾讯ISUX

29320
来自专栏互联网杂技

如何打造一个高效适配的H5

以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一...

35550
来自专栏姬小光

像素眼是怎样炼成的

传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,小鸡君本人是个苦逼程序员,但小鸡君的像素眼也不比任何一个设计师差。

11540
来自专栏菜鸟前端工程师

html+css学习笔记013-阿里图标0iframe

14120
来自专栏ytkah

一行js弹窗代码就能设计漂亮的弹窗广告

  接到一个设计需求,要求xmyanke在网站右侧挂一个弹窗广告宣传最近的活动,找了半天都没看到合适的,自己鼓捣了一行js弹窗代码就能设计漂亮的弹窗广告,来瞧一...

82780
来自专栏Crossin的编程教室

【Pygame 第4课】 获取鼠标位置

最近微信上很火的“打飞机”游戏,通过手指在屏幕上触摸的位置来移动你的飞机。在电脑上,我们没法直接用手操作,但可以用鼠标替代手指。 在电脑游戏里,鼠标是个很好用的...

532120
来自专栏佳爷的后花媛

零碎之viewport

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

16640

扫码关注云+社区

领取腾讯云代金券