H5新特性：video与audio的使用 - 海*星_H5之家 - 中国HTML5教程资源分享第一站

HTML5 DOM 为 <audio> 和 <video> 元素提供了方法、属性和事件。

这些方法、属性和事件允许您使用 JavaScript 来操作 <audio> 和 <video> 元素。

·首先带大家熟悉一下video标签的属性方法，根据属性方法做一个小demo，

HTML5支持的视频格式：

Ogg

带有Theora视频编码+Vorbis音频编码的Ogg文件

支持的浏览器:F、C、O

MEPG4

带有H.264视频编码+AAC音频编码的MPEG4文件

支持的浏览器: S、C

WebM

想要video能自动填充慢父div的大小，只要给video标签加上style="width= 100%; height=100%; object-fit: fill"即可

指定一种视频格式，不能播就提示

<video id="media" src="examp.mp4" width="500" poster="examp1.jpg" >您的浏览器不支持video</video>

给定多种视频格式，浏览器根据自身支持程度选择播放哪一种

注意：多个source标签，浏览器会从第一个开始识别，如果第一个不被识别，则会继续识别第二个；如果第一个识别成功，则会直接播放第一种格式视频

<video controls = “controls”> <source src=”1.mp4” type=”video/mp4” /> //src属性写到source标签中，要指定视频的type类型，例如MP4的即为type=“video/mp4” <source src = “2.ogg” type=”video/ogg” /> //ogg格式 <source src=”3.webm” type=”video/webm” /> //webm格式 </video>

    controls    是否显示播放控件
    autoplay    是否打开浏览器后自动播放
    width          设置播放器的宽度
   height         设置播放器的高度
    loop           设置视频是否循环播放
    preload       设置是否等加载完再播放
    src url     设置要播放视频的url地址
    poster imgurl 设置播放器初始默认显示图片

     canPlayType() 检测浏览器是否能播放指定的音频/视频类型。
    play()          开始播放音频/视频。
     pause()        暂停当前播放的音频/视频。

    playbackRate    设置或返回音频/视频播放的速度。
     currentTime     设置或返回音频/视频中的当前播放位置（以秒计）。
     duration        返回当前音频/视频的长度（以秒计）。
     loadedmetadata：当指定的音频/视频的元数据已加载时，会发生 loadedmetadata事件。
     timeupdate:      时间改变时触发

muted 设置或返回音频/视频是否静音。
volume 设置或返回音频/视频的音量

<!DOCTYPE html> <html> <head> <meta charset=> <title></title> </head> <body> 视频地址：<input type=id=value=/> <button onclick=>load</button><br /> <video id=width=height=controls autoplay loop preload poster=></video><br /> <button onclick=>播放/暂停</button> <button id=>静音</button> <button id=>++</button> <button id=>--</button> <button id=>减慢速率</button> <button id=>恢复速率</button> <button id=>加快速率</button> <br /> <button id=>复位</button> <button id=> <<倒退 </button> <button id=>快进>></button> <br /> 视频长度: <span id=></span> <br /> 当前时间: <span id=></span><br /> 持续时间: <span id=></span> </body> <script type=> video=document.getElementById(); function getVideo(){ ).value; if(videoUrl!=""){ video.src=videoUrl; video.load(); } } (video.canPlayType){ function play(){ if(video.paused){ video.play(); }else{ video.pause(); } } } ).addEventListener(,function(){ if(video.muted){ video.muted=false; }else{ video.muted=true; } }); function setVol(value){ var vol=video.volume; vol+=value; if(vol>=0&&vol<=1){ video.volume=vol; }else{ video.volume=(vol<0)?0:1; } } document.getElementById().addEventListener(,function(){ setVol(.1); }); document.getElementById().addEventListener(,function(){ setVol(-.1); }); document.getElementById().addEventListener(,function(){ video.playbackRate-=.25; }); document.getElementById().addEventListener(,function(){ video.playbackRate+=.25; }); document.getElementById().addEventListener(,function(){ video.playbackRate=1; }); function setTime(a){ if(a==0){ video.currentTime=a; }else{ video.currentTime+=a; } } document.getElementById().addEventListener(,function(){ setTime(0); }); document.getElementById().addEventListener(,function(){ setTime(10); }); document.getElementById().addEventListener(,function(){ setTime(-10); }); video.addEventListener(, function () { vLength = video.duration.toFixed(1); document.getElementById().textContent = vLength; }); video.addEventListener(, function () { var currentTime= video.currentTime; document.getElementById().textContent = currentTime.toFixed(1); document.getElementById().textContent = (vLength - currentTime).toFixed(1); }); </script> </html>