html5学习---------2
来源:互联网 发布:屈臣氏的分销网络 编辑:程序博客网 时间:2024/06/04 01:11
<Video>的使用
<video src="文件地址" controls="controls"></video>< video src="文件地址" controls="controls">您的浏览器暂不支持video标签。播放视频</ video >< video controls="controls" width="300"><source src="move.ogg" type="video/ogg" ><source src="move.mp4" type="video/mp4" >您的浏览器暂不支持video标签。播放视频</ video >
Video的常见属性
Autoplay
Autoplay
视频就绪自动播放
controls
controls
向用户显示播放控件
Width
Pixels(像素)
设置播放器宽度
Height
Pixels(像素)
设置播放器高度
Loop
Loop
播放完是否继续播放该视频,循环播放
Preload
Proload
是否等加载完再播放
Src
url
视频url地址
Poster
Imgurl
加载等待的画面图片
Autobuffer
Autobuffer
设置为浏览器缓冲方式,不设置autoply才有效
Video的常用事件
abort
当音视频加载被异常终止时产生该事件
canplay
当浏览器可以开始播放该音视频时产生该事件
canplaythrough
当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange
当媒体的总时长改变时产生该事件
emptied
当前播放列表为空时产生该事件
ended
当前播放列表结束时产生该事件
error
当加载媒体发生错误时产生该事件
loadeddata
当加载媒体数据时产生该事件
loadedmetadata
当收到总时长,分辨率和字轨等metadata时产生该事件
loadstart
当开始查找媒体数据时产生该事件
<audio>的使用<audio src="文件地址" controls="controls"></audio>< audio src="文件地址" controls="controls">您的浏览器暂不支持audio标签。播放视频</ video >< audio controls="controls" ><source src="happy.MP3" type="video/mpeg" ><source src="happy.ogg" type="video/ogg" >您的浏览器暂不支持audio标签。播放视频</ audio>
<!doctype html><html><head></head><body><!--<video src="movie.webm" controls="controls">您的破浏览器都是古董早该换了,不然休想看我们的激情小电影。</video><hr />多资源的视频播放<video controls="controls" width="500" height="500" autoplay="autoplay" loop="loop" poster="PLMM.jpg"><source src="movie.ogg" type="video/ogg" /><source src="movie.webm" type="video/webm" />您的浏览器不支持视频标签,还不赶快升级。</video>--><hr />使用以下VIDEO标签的API<br /><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(){video.currentTime+=10;//相当于video.currentTime=video.currentTime+10}//快退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><hr />音频标签的使用<br /><audio src="我的好兄弟.mp3" controls="controls">您的老牛已经拉不动破车了,赶紧换了吧,想听中国好声音么?</audio></body></html>
0 0
- HTML5学习2
- html5学习-2
- html5学习---------2
- 学习html5(2)
- html5学习笔记(2)
- HTML5学习笔记<2>
- 学习笔记-HTML5-2
- html5的学习2
- HTML5 学习笔记 (2)
- html5学习笔记(2)
- HTML5 学习
- html5学习
- HTML5学习
- html5学习
- html5学习
- 学习HTML5
- HTML5学习
- HTML5学习
- solr项目流程
- 将你的N9开启“开发者模式”,连接到QT SDK
- 正则表达式之元字符与转义
- 利用notepad++中安装python脚本实现批量转换文件编码
- openwrt增加自己的开发板
- html5学习---------2
- 查找
- [leetcode] Edit Distance
- cxgrid删除选中行记录
- 图
- linux mount (挂载命令)详解
- 把二元查找树转变成排序的双向链表
- 在Android中绘制圆角矩形图片
- 快速排序算法