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为例来说明
- 视频的播放使用play()方法
- //点击开始按钮播放视频 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" /> 当前音量:<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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-2-1，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读