1.canPlayType():用JavaScript检测浏览器是否支持音频
<script type/javascript> function checkAudio(){ var myAudio = document.createElement("audio"); if(myAudio.canPlayType){ //返回是或非或maybe if("" != myAudio.canPlayType("audio/mpeg")){ //不支持返回空字符串 document.write("您的浏览器支持mp3编码。<br />"); } if( "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) { document.write("您的浏览器支持oog编码<br />"); } //if ( "" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) { // document.write("您的浏览器支持oog编码。<br>"); //} if("" !=myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"')){ document.write("您的浏览器支持acc编码<br />"); } } else{ document.write("您的浏览器不支持要检测的音频格式。"); } } window.onload = function(){ checkAudio(); } </script>结论：chrom支持的种类最多，其他浏览器不尽相同
2.canPlayType():用JavaScript检测浏览器是否支持视频格式
<script type/javascript> function checkVideo(){ var myVideo = document.createElement("video"); if(myVideo.canPlayType){ //返回是或非或maybe document.write("返回不为空<br />"); if("" != myVideo.canPlayType('video/mp4;codecs="avc1.64001E"')){ //不支持返回空字符串 document.write("您的浏览器支持h264编码。<br />"); } if("" !=myVideo.canPlayType('video/ogg;codecs="vp8"')){ document.write("您的浏览器支持vp8编码<br />"); } if("" !=myVideo.canPlayType('video/ogg;codecs="theora"')){ document.write("您的浏览器支持theora编码<br />"); } } else{ document.write("您的浏览器不支持要检测的视频格式。"); } } window.onload = function(){ checkVideo(); } </script>结论：chrom支持的种类最多，其他浏览器不尽相同
3.audio标签 播放音频：
source标签可以指定多个源值，供浏览器自由选择，而用audio的src属性只能指定一个源文件。
4.
背景音乐，自动循环播放音频：
4.播放视频
<body> <video src="特种兵之火凤凰 26_超清.mp4" controls="controls"> </video>
5.js视频函数
js音频视频通用函数：
autobuffer：自动缓存。
buffered可读属性，确认浏览器已经缓存，与autoplay配合使用
currentSrc可读属性，返回媒体文件的URL地址，若没有，则返回空
currenttime：获取当前的播放的时间
defaultplayrate：播放的倍速
duration：播放的时间默认为秒
ended：获取是否播放结束
errer：没有出现错误返回no
loop：重复播放
muted：是否静音
paused：媒体是否停止播放
play:继续播放
6.用脚本控制音乐播放：
<style type="text/css"> body{background:url(file:///D|/壁纸/背景图/粉系建筑/59fe8a3a20afd202.jpg!600x600.jpg) no-repeat;} #toggle{ position:absolute; left:311px; top:293px;} </style> <title>无标题文档</title> </head> <body> <audio id = "music" controls> <source src="李荣浩-李白.mp3"> </audio> <button id="toggle" onclick="toggleSound()">播放</button> <script type="text/javascript"> function toggleSound(){ var music = document.getElementById("music"); var toggle = document.getElementById("toggle"); if(music.paused){ music.play(); toggle.innerHTML = "暂停"; } else{ music.pause(); toggle.innerHTML = "播放"; } } </script> </body>7.抓取视频帧，并且点击视频帧调到相对应的时间轴
<!DOCTYPE html> <html> <title></title> <video id="movies" autoplay oncanplay="startVideo()" onended="stopTimeline()" autobuffer="true" width="400px" height="300px"> <source src="medias/volcano.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="medias/volcano.mp4" type='video/mp4'> </video> <canvas id="timeline" width="400px" height="300px"> <script type="text/javascript"> var updateInterval = 5000; var frameWidth = 100; var frameHeight = 75; var frameRows = 4; var frameColumns = 4; var frameGrid = frameRows * frameColumns; var frameCount = 0; var intervalId; var videoStarted = false; function startVideo() { if (videoStarted) return; videoStarted = true; updateFrame(); intervalId = setInterval(updateFrame, updateInterval); var timeline = document.getElementById("timeline"); timeline.onclick = function(evt) { var offX = evt.layerX - timeline.offsetLeft; var offY = evt.layerY - timeline.offsetTop; var clickedFrame = Math.floor(offY / frameHeight) * frameRows; clickedFrame += Math.floor(offX / frameWidth); var seekedFrame = (((Math.floor(frameCount / frameGrid)) * frameGrid) + clickedFrame); if (clickedFrame > (frameCount % 16)) seekedFrame -= frameGrid; if (seekedFrame < 0) return; var video = document.getElementById("movies"); video.currentTime = seekedFrame * updateInterval / 1000; frameCount = seekedFrame; } } function updateFrame() { var video = document.getElementById("movies"); var timeline = document.getElementById("timeline"); var ctx = timeline.getContext("2d"); var framePosition = frameCount % frameGrid; var frameX = (framePosition % frameColumns) * frameWidth; var frameY = (Math.floor(framePosition / frameRows)) * frameHeight; ctx.drawImage(video, 0, 0, 400, 300, frameX, frameY, frameWidth, frameHeight); frameCount++; } function stopTimeline() { clearInterval(intervalId); } </script> </html>
