6音频和视频处理 如果想在浏览器上播放视频和音频都是需要通过一些插件的支持（flash） 但是因为浏览器和插件之间存在一些兼容性问题，所以 为了解决这些问题，就推出了audio和video两种新的属性来作为现在大多数浏览器处理音频和视频的标准方法，使其可以统一化，简便化 1.Audio <audio src="../files/荣耀.mp3" preload="metadata" controls="controls"></audio> 1.src():本地音频文件的地址 2.controls：由浏览器提供的音频控件。 3.Proload：预加载，让文件预先缓冲，优化播放的速度 可选值：auto：对整个音频文件进行加载（默认值） Metadata：只加载文件的源数据（第一帧，播放的总时长，播放列表，不能进行快进） None：取消默认值 <audio src="../files/荣耀.mp3" autoplay loop preload="auto" controls="controls"></audio> Loop：循环播放，布尔类型，在标签内使用时默认为true， Autoplay：自动播放，布尔类型，默认为true 1.1：控制函数和常用属性： 1.playOrpaused()：控制音频的播放和暂停 由两种方法组成 Play()--播放 paused()暂停 var audio; window.οnlοad=function(){ initAuto()//初始化audio }; var initAuto = function(){ audio = document.getElementById("audio")//获取audio }; function playOrpaused(id,obj){ if(audio.paused){ audio.play(); obj.innerHTML = "暂停"; return ; } audio.pause(); obj.innerHTML = "播放"; } 2.当前播放时长（单位：秒） audio.currentTime 3.获取音频总时长 audio.duration 4.隐藏/显示播放控件 function hiddenOrShowControls(obj){ if(audio.controls){ audio.removeAttribute("controls"); obj.innerHTML = '显示'; return; } audio.controls = "controls"; obj.innerHTML = '隐藏'; } 5.可脚本控制的特性值 1.开启或关闭静音 布尔类型，当值为true时，开启静音，值为false时，关闭静音。 function muted(obj){ if(audio.muted){ audio.muted = false; obj.innerHTML = "开启静音" }else{ audio.muted = true; obj.innerHTML = "关闭静音" } } 注意：以上函数当被调用时参数为this，否则会报错。 2.vol：通过改变函数中定义的volume的值来控制音量的大小， Volume的取值范围：[0,1],超出这个范围就会报错，不过我们可以使用try{ }catch(){ }把这个错误抛出异常。 视频： 标签属性： 有些是和音频具有相同的功能属性 不同; 新属性： Poster：给视频设置第一帧，也就是封面，括号内是文件的路径 也可以给视频设置width和height：高度和宽度
<video width="600px" height="150px" src="../files/mov_bbb.mp4" preload="auto" loop poster="../files/poster.png" controls="controls"></video> 2.视频开始播放的位置（播放点）； var video = document.getElementById("video"); function playBySeconds(){ video.currentTime = 5; } 3.设置播放速度 function setPlaySpeed(){ video.playbackRate = 0.5; } 通过改变playbadRate的值来设置 3.返回视频的总时长： function duration(){ alert(video.duration) } 4.onended：当视频播放完成之后出发的事件； video.onended = function(){ alert("视频播放完成"); }
ok ，视频和音频的分享就此结束，如果有兴趣的小伙伴可以自己做一个播放器了。
要相信自己哦!!!
转载请注明原文地址: https://www.6miu.com/read-14548.html
