HTML5----video ,audio常规操作
2015-08-20 09:33
736 查看
<!doctype html> <html> <head></head> <body> <video controls="controls" width="800" height="600" autoplay="autoplay" loop="loop" poster="AAA.jpg"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> 您的浏览器不支持视频标签,还不赶快升级。 </video>--> <video src="movie.webm" controls="controls" id="video"> 您的破浏览器都是古董早该换了,不然休想看我们的激情小电影。 </video> <br /> <button onclick="bofang()">播放</button> <button onclick="zanting()">暂停</button> <button onclick="kuaijin()">快进10秒</button> <button onclick="kuaitui()">快退10秒</button> <button onclick="shutup(this)">闭嘴</button> <button onclick="soso()">加速播放</button> <button onclick="yu()">减速播放</button> <button onclick="normal()">正常播放</button> <button onclick="upper()">提高嗓门</button> <button onclick="lower()">降低嗓门</button> <script> //获取对应的video标签 var video=document.getElementById('video'); //播放方法 function bofang(){ video.play(); } //暂停方法 function zanting(){ video.pause(); } //快进10秒 function kuaijin(){ //快退10秒 function kuaitui(){ video.currentTime-=10; } //静音 function shutup(obj){ if(video.muted){ obj.innerHTML="闭嘴"; video.muted=false; }else{ obj.innerHTML="张嘴"; video.muted=true; } } //3倍速度 function soso(){ video.playbackRate=3; } //慢三倍速度 function yu(){ video.playbackRate=1/3; } //正常倍速 function normal(){ video.playbackRate=1;//默认的播放倍速是1 } //调高声音 function upper(){ video.volume+=0.2;//声音值的范围是0-1 } //调低声音 function lower(){ video.volume-=0.2; } </script> <audio src="ABC.mp3" controls="controls"> 您的浏览器不支持视频标签,还不赶快升级。 </audio> </body> </html>
相关文章推荐
- HTML5标签
- H5上传图片
- HTML5 学习记录——1
- HTML5 boilerplate 笔记(转)
- HTML5+ 打开关闭侧滑窗口
- Chrome/Chromium HTML5 video 视频播放硬件加速
- html5+css3 权威指南阅读笔记(三)---表单及其他新增和改良元素
- 普元日记---HTML5底部遮罩层
- 《HTML5 Canvas核心技术——图形、动画与游戏开发》第三章要点汇总
- html5离线缓存--manifest
- HTML5 随手记(4)
- web socket and web worker 基础原理及使用
- HTML5 cavans的使用
- html5 history解析
- html5+css3(二)
- 有关html5的特性(一)
- HTML5 LocalStorage 本地存储
- HTML5游戏实战之20行代码实现打地鼠
- HTML5新api即pushState和replaceState实现无刷新修改url
- Html5文件