下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。
内存溢出小编现在分享给大家，也给大家做个参考。
<!DOCTYPE HTML><HTML><head lang="en"> <Meta charset="UTF-8"> <Title>HTML5中的音频和视频</Title> </head><body> <!--HTML4中的音频视频播放方式 代码冗杂，加载失败无法播放，一片空白..需要flash支持 --> <object classID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" wIDth="500" height="400" codebase="swflash.cab#version=6,10,0"> <param name="allowFullScreen" value="true" /> <embed src="1117786.mp4" autostart="0" type="application/x-shockwave-flash" wIDth="500" height="400"> </embed> </object> <!--HTML5音视频播放 autoplay:自动播放,controls；显示控制条,loop:是否循环播放,preload:{预加载处理 auto:自动全部加载音视频 none:不加载 Metadata：预加载元数据(媒体字节数,第一帧，播放列表，持续时间等) }， poster:（vIDeo元素独有）当预加载的视频不存在时，显示一张默认的图片， error:正常情况下为null,出现错误返回一个MediaError对象，有四种状态: MEDIA_ERR_ABORTED (数字为1):媒体下载过程中由于用户 *** 作原因终止; MEDIA_ERR_NETWORK (数字为2):网络错误媒体下载终止 MEDIA_ERR_DECODE (数字为3):媒体解码错误 MEDIA_ERR_SRC_NOT_SUPPORTED (数字为4):媒体格式不支持， net --> <!--http://v.youku.com/v_show/ID_XMjE4MDU1MDE2.HTML--> <vIDeo ID="vIDeo" src="1117786.mp4" preload="a" loop="loop" autoplay="autoplay" controls="controls" wIDth="500px" height="450px"> 您的浏览器不支持vIDeo！ <!--source :为媒体文件指定多个播放格式和编码方式--> <source src="1117786.mp4" type="vIDeo/ogg"> <script type="text/JavaScript"> var vIDeo = document.getElementByID("vIDeo"); //监听错误信息 vIDeo.addEventListener("error",function(){ var error = vIDeo.error; var code = error.code; switch (code){ case 1 : console.info("视频加载被终止"); break; case 2 : console.info("网络原因,视频加载被终止"); break; case 3 : console.info("解码失败"); break; case 4 : console.info("视频格式不支持"); break; } },false); /* * networkState:网络状态属性， * 在加载过程中读取当前网络的状态,* NETWORK_EMPTY（数字为 0）:网络链接初始状态,* NETWORK_IDLE（数字为1）:已经选择好媒体播放格式,未建立网络链接,* NETWORK_LOADING（数字为2）:媒体加载中...， * NETWORK_NO_SOURCE（数字为3）:没有支持的编码格式 * * */ //获取networkState属性 /** * 此处针对网络媒体而言,播放本地视频 net===3 * @type {Number} */ var net = vIDeo.networkState; if(net==0){ console.info('网络链接初始状态..'); }else if (net==1){ console.info('已经选择好媒体播放格式,未建立网络链接'); }else if (net==2){ console.info('媒体加载中...'); }else if(net==3){ console.info('没有支持的编码格式'); } //currentSrc:为只读属性,获取播放文件的src地址，本地文件为空 var src = vIDeo.currentSrc; console.info("对应的src为:"+src); //buffered:属性 /** * 返回一个对象，实现了TimeRanges接口， * 以确认浏览器是否缓存数据。 * TimeRanges:表示一段时间范围，大多数情况下TimeRanges对象表示的时间范围是一个从0开始的范围。 * * TimeRanges:有一个length属性,表示有多少个时间范围,大多数情况下，存在时间范围时该值为1,不存在时为0. * 有两个方法，start(index) 和end(index),大多数情况下index设置为0即可; * * * @type {TimeRanges} */ var buf = vIDeo.buffered; console.info(buf.length); /** * readyState属性:返回当前媒体播放位置的就绪状态，有五个可能值。 * HAVE_nothing:(数字为0)没有获取到媒体的任何信息,当前播放位置没有可播放的数据. * HAVE_MetaDATA:(数字为1)已经获取到足够的媒体数据,但是当前位置的媒体数据无效. * HAVE_CURRENT_DATA:(数字为2):当前位置已经有数据可以播放，但是没有获取到让播放器前进的数据。（ * 没有获取到下一帧的数据或者播放已经完成） * HAVE_FUTURE_DATA:(数字3)表示当前位置已经获取到数据，可获取到让播放器前进的数据。为视频文件时，表示当前帧和下一帧 * 数据都获取到了,当当前位置是最后一帧时表示，readyState不可能为3状态(HAVE_FUTURE_DATA)。 * HAVE_ENOUGH_DATA:(数字4)表示当前位置已经获取到数据，可获取到让播放器前进的数据， * 浏览器以某一速度加载，保证足够的数据进行播放。 * @type {number|Number} */ var state = vIDeo.readyState; console.info("readyState属性为:"+state); /** * seekable 和seeking属性:表示浏览器是否正在请求特定播放位置的数据. * * seeking属性返回boolean值，true表示正在请求，false表示停止请求。 * * seekable属性返回一个TimeRanges对象,表示请求到的时间范围。 * * 均为只读属性。 * @type {TimeRanges} */ var seekable = vIDeo.seekable; var seeking = vIDeo.seeking; console.info("浏览器是否正在请求特定播放位置的数据:"+seeking); /** * * @type {Number} */ var cur = vIDeo.currentTime; var startTime = vIDeo.startTime;//开始播放的时间，一般为0 var duration = vIDeo.duration;//媒体文件总的播放时间. console.info(cur+","+startTime+","+duration); //浏览器支持不一致: firefox:0,undefined,NaN Chrome: 0,NaN /** *played :读取已经播放的时间段 * @type {TimeRanges} * */ var play = vIDeo.played; /** * 是否为暂停状态， * true表示暂停播放， * false表示正在播放 * @type {boolean} */ var paused = vIDeo.paused; /** * ended属性：boolean值 * true:表示播放完毕 * false：表示正在播放 * @type {boolean} */ var ended= vIDeo.ended; /** * defaultPlaybackRate: * 修改或者读取默认的播放速率 * playbackRate: * 修改或者读取当前的播放速率 * @type {Number} */ var rate = vIDeo.defaultPlaybackRate; var playRate =vIDeo.playbackRate; console.info("当前媒体的播放速率:"+rate); /** * volume属性: 读取或者修改默认音量，从0到1.0为静音，1为最大音量. * @type {Number|CSsstyleDeclaration.volume|*} */ var volume = vIDeo.volume; volume=0.4; /** * muted:返回boolean值。 * true:表示静音状态 * @type {boolean} */ var muted = vIDeo.muted; console .info("当前音量:"+volume+","+muted);// 1,false </script> </vIDeo> <input type="button" onclick="pause();" value="暂停"> <input type="button" onclick="play();" value="播放"> <script> var vIDeo = document.getElementByID("vIDeo"); function pause(){ vIDeo.pause(); console.warn("视频已经暂停"); //判断是否为暂停状态 console.info(vIDeo.paused); } function play(){ vIDeo.play(); console.warn("视频开始播放..."); } </script> <audio > <!-- 音频和视频的属性和方法，以及事件处理基本一致。 --> </audio> </body></HTML> 以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
总结以上是内存溢出为你收集整理的Html5音频和视频播放示例全部内容，希望文章能够帮你解决Html5音频和视频播放示例所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）