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|/%E5%A3%81%E7%BA%B8/%E8%83%8C%E6%99%AF%E5%9B%BE/%E7%B2%89%E7%B3%BB%E5%BB%BA%E7%AD%91/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>