你的位置:首页 > 网页设计

[网页设计]HTML5 audio与video标签实现视频播放,音频播放


随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。

<audio> 标签属性

<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>

当然audio元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:

再如下面:

<audio controls="controls">   <source src="music.ogg" />  <source src="music.mp3" />  <source src="music.wav" /> </audio> 

 

<video> 标签属性

下面先介绍下video标签的一般用法

video标签的属性如下:

注:control 属性供添加播放、暂停和音量控件。

一般用法:

<div class="videoCon">  <video width="750" height="300" id="videoP" src="video.mp4"></video></div>

当然可以暂停,播放该视频,使用方法如下:

function playPause() {  var myVideo = document.getElementById('videoP');  if (myVideo.paused){    myVideo.play();  }else{  myVideo.pause();  }  }

 

当然video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式:

如下:

<video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag.</video>

 

 

获取HTMLVideoElement和HTMLAudioElement对象

//audio可以直接通过new创建对象Media = new Audio("http://www.abc.com/test.mp3");//audio和video都可以通过标签获取对象Media = document.getElementById("media");

Media方法和属性

//错误状态Media.error;      //null:正常Media.error.code;    //1.用户终止 2.网络错误 3.解码错误 4.URL无效//网络状态Media.currentSrc;      //返回当前资源的URLMedia.src = value;     //返回或设置当前资源的URLMedia.canPlayType(type);  //是否能播放某种格式的资源Media.networkState;     //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源Media.load();        //重新加载src指定的资源Media.buffered;       //返回已缓冲区域,TimeRangesMedia.preload;       //none:不预载 metadata:预载资源信息 auto://准备状态Media.readyState;    //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATAMedia.seeking;     //是否正在seeking//回放状态Media.currentTime = value;     //当前播放的位置,赋值可改变位置Media.startTime;          //一般为0,如果为流媒体或者不从0开始的资源,则不为0Media.duration;           //当前资源长度 流返回无限Media.paused;            //是否暂停Media.defaultPlaybackRate = value; //默认的回放速度,可以设置Media.playbackRate = value;     //当前播放速度,设置后马上改变Media.played;            //返回已经播放的区域,TimeRanges,关于此对象见下文Media.seekable;           //返回可以seek的区域 TimeRangesMedia.ended;            //是否结束Media.autoPlay;           //是否自动播放Media.loop;             //是否循环播放Media.play();            //播放Media.pause();           //暂停//控制Media.controls;     //是否有默认控制条Media.volume = value;  //音量Media.muted = value;  //静音//TimeRanges(区域)对象TimeRanges.length;       //区域段数TimeRanges.start(index)     //第index段区域的开始位置TimeRanges.end(index)      //第index段区域的结束位置

 

事件

eventTester = function(e){ Media.addEventListener(e,function(){  console.log((new Date()).getTime(),e); });}eventTester("loadstart");    //客户端开始请求数据eventTester("progress");    //客户端正在请求数据eventTester("suspend");     //延迟下载eventTester("abort");      //客户端主动终止下载(不是因为错误引起),eventTester("error");      //请求数据时遇到错误eventTester("stalled");     //网速失速eventTester("play");      //play()和autoplay开始播放时触发eventTester("pause");      //pause()触发eventTester("loadedmetadata"); //成功获取资源长度eventTester("loadeddata");   //提示当前帧的数据是可用的eventTester("waiting");     //等待数据,并非错误eventTester("playing");     //开始回放eventTester("canplay");     //可以播放,但中途可能因为加载而暂停eventTester("canplaythrough"); //可以播放,歌曲全部加载完毕eventTester("seeking");     //寻找中eventTester("seeked");     //寻找完毕eventTester("timeupdate");   //播放时间改变eventTester("ended");      //播放结束eventTester("ratechange");   //播放速率改变eventTester("durationchange"); //资源长度改变eventTester("volumechange");  //音量改变