新增标签
audio：视屏播放 video：音频播放基本理解
常见的格式 视频编码：H.264、Theora、VP8(google开源) 常见的音频格式编码：AAC、MP3、Vorbis html5 支持的格式 Ogg =带有Theora视频编码+Vorbis音频编码的Ogg文件支持的浏览器:F、C、O MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件支持的浏览器: S、C WebM=带有VP8视频编码+Vorbis音频编码的WebM格式 支持的浏览器: I、F、C、O基本操作
<video 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'> <source src="move.webm" type='video/webm'> 您的浏览器暂不支持video标签。播放视频 </ video >常见的属性
属性 值 描述 autoplay autoplay 视频就绪自动播放 controls controls 向用户显示播放控件 width pixels(像素) 设置播放器宽度 height pixels(像素) 设置播放器高度 loop loop 播放完是否继续播放该视频，循环播放 preload preload 规定是否在页面加载后载入视频。 src url 视频url地址 poster imgurl 加载等待的画面图片 auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频 myvideo.autoplay='autoplay' //脚本设置 属性方法基本事件操作
播放 play() 暂停 pause() paused 属性返回音频/视频是否已暂停。 控制大小 width ended 返回当前播放是否结束标志 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <video id="a"> <source src="shuishou.mkv" type="video/mp4"></source> </video> <p id="b" onclick="playa()">播放</p> <p onclick="big()">大</p> <p onclick="fullScreen()">全屏</p> </body> <script type="text/javascript"> var a=document.getElementById("a"); var b=document.getElementById("b"); a.autoplay='autoplay'; function playa(){ if(a.paused){ a.play(); }else{ a.pause() } } function big(){ a.width=500 } function fullScreen(){ //进入全屏 a.webkitRequestFullScreen(); a.mozRequestFullScreen(); a.requestFullscreen(); } a.addEventListener('ended', function(){ //退出全屏 document.webkitCancelFullScreen(); document.mozCancelFullScreen(); document.cancelFullScreen(); }, false); </script> </html>静音事件
同理播放事件 需要判断状态 muted 方法 是否为静音 <script type="text/javascript"> function sou(){ if(a.muted){ a.muted=false }else{ a.muted=true } } </script>声音控制
volume 获取播放器的音量 onchange 调用函数 range 最大值1 最小值0 移动0.001
function va(){ a.volume = e.value; }时间获取以及转换
canplay() 提示该视频已准备好开始播放： duration 属性返回当前音频/视频的长度，以秒计。 a.addEventListener('canplay', function(){ console.log(a.duration) }, false);时间转换
转换时间 然后判断数字格式 function changeTime(time){ var newTime = parseInt(time); //得到小时 var iH = toZero(Math.floor(newTime/3600)); //得到分钟 var iM = toZero(Math.floor(newTime%3600/60)); //得到秒数 var iS = toZero(Math.floor(newTime%60)); return iH+':'+iM+':'+iS; } function toZero(num){ if(num<10){ return '0'+num; } else{ return num; } }当前时间获取
timeupdate 当视频播放位置已经改变，显示视频当前播放位置（一秒计） 事件
currentTime 当前播放的时间，单位秒 属性
a.addEventListener('timeupdate', function (){ d.value = changeTime(a.currentTime); },false);进度条
max=视频总时间
设置进度条位置 给进度条赋值当前时间
function change(){ a.currentTime=f.value; } **常见方法api**API方法总结
