您的位置：首页 > Web前端 > HTML5

HTML5之音频与视频

2016-05-09 10:43 691 查看

HTML5之音频与视频
l 标签
• audio 、video
• source
l 视频容器
• 容器文件，类似于压缩了一组文件
– 音频轨道
– 视频轨道
– 元数据：封面，标题，字幕等
– 格式：.avi、.flv、.mp4、.mkv、.ogv等
l 编解码器
• 原始的视频容器非常大，添加需编码，播放需解码
• 音频编解码器
– AAC、MPEG-3、Ogg Vorbis
• 视频编解码器
– H.264、VP8、Ogg Theora
编解码器：每个浏览器可能用的编解码器不同，有开源，也有收费的。
编解码器在加载到页面时进行压缩，当点击播放时，再解码，放大。

<body>

<audio controlssrc="johann_sebastian_bach_air.mp3"></audio>

//这种方式IE不支持改用下面的方式

<video controls>

<sourcesrc="Intermission-Walk-in.ogv"></source>

<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>//IE执行这一条

</video>

</body>

注意：

必须加控件才能显示

IE下没有对ogv格式的视频进行编解码器

Source 如果不支持，走下一条

l 媒体元素

• controls : 显示或隐藏用户控制界面

• autoplay : 媒体是否自动播放

• loop : 媒体是否循环播放

• currentTime : 开始到播放现在所用的时间

• duration : 媒体总时间(只读)

• volume : 0.0-1.0的音量相对值

• muted : 是否静音

• autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性

• currentTime :
开始到播放现在所用的时间

可以读取，也可以设置

可以设置刚开始进入时开始的播放时间

window.onload =function(){

var oA = document.getElementById('a1');

setInterval(function(){

console.log(oA.currentTime);

},1000);

//oA.currentTime = 60;//播放从60开始

};

</script>

</head>

<body>

<audioid="a1" controlssrc="johann_sebastian_bach_air.mp3"></audio>

</body>

• duration :
媒体总时间(只读)

• volume : 0.0-1.0的音量相对值

音量从0到1的值 0为静音

• muted : 是否静音

Flase 表示不是静音

window.onload =function(){

var oA = document.getElementById('a1');

console.log( oA.duration );

console.log( oA.volume );

console.log( oA.muted );

};

</script>

</head>

<body>

<audioid="a1" controls src="johann_sebastian_bach_air.mp3"></audio>

</body>

播放总时间

• autobuffer : 开始的时候是否缓冲加载，autoplay的时候，忽略此属性

页面一加载，则已经加载，不需要在播放器点开始时才加载

l 媒体元素_2

• paused : 媒体是否暂停(只读)

• ended : 媒体是否播放完毕(只读)

• error : 媒体发生错误的时候，返回错误代码 (只读)

• currentSrc : 以字符串的形式返回媒体地址(只读)

• play() : 媒体播放

• pause() : 媒体暂停

• load() : 重新加载媒体

• paused :
媒体是否暂停(只读)

• ended :
媒体是否播放完毕(只读)

• error :
媒体发生错误的时候，返回错误代码 (只读)

• currentSrc : 以字符串的形式返回媒体地址(只读)

window.onload =function(){

var oA = document.getElementById('a1');

console.log( oA.paused );

console.log( oA.ended );

console.log( oA.error );

console.log( oA.currentSrc );

};

</script>

</head>

<body>

<audioid="a1" controlssrc="johann_sebastian_bach_air.mp3"></audio>

</body>

• play() :
媒体播放

• pause() :
媒体暂停

• load() :
重新加载媒体

鼠标移入，播放，移出，暂停播放

改完地址后必须用load重新加载

window.onload = function(){

varoV = document.getElementById('v1');

varoInput = document.getElementById('input1');

varaS = document.getElementsByTagName('source');

oV.onmouseover= function(){

this.play();

};

oV.onmouseout= function(){

this.pause();

};

oInput.onclick= function(){

aS[0].src= 'xxxx.mp4';

aS[1].src= 'yyyy.mp4';

oV.load();

};

};

</script>

</head>

<body>

<input type="button"value="重新加载" id="input1" />

<video id="v1">

<sourcesrc="Intermission-Walk-in.ogv"></source>

<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>

</video>

</body>

l 媒体元素_3 --媒体元素事件

• loadstart progress suspendemptied stalled play pause loadedmetadata loadeddata waiting playing canplaycanplaythrough seeking seeked timeupdate ended ratechange durationchangevolumechange

Ended播放完成后执行，弹出123

window.onload = function(){

varoV = document.getElementById('v1');

oV.addEventListener('ended',function(){

alert(123);

},false);

};

</script>

</head>

<body>

<video controls id="v1">

<sourcesrc="Intermission-Walk-in.ogv"></source>

<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>

</video>

</body>

l Video额外特性

• poster : 视频播放前的预览图片

• width、height : 设置视频的尺寸

• videoWidth、 videoHeight : 视频的实际尺寸(只读)

实际尺寸，即使修改，也能查找原来的元素大小

window.onload = function(){

varoV = document.getElementById('v1');

oV.poster= '2.png';

oV.width= 500;

oV.height= 500;

alert(oV.videoWidth );

oV.addEventListener('ended',function(){

alert(123);

},false);

};

</script>

</head>

<body>

<video controls id="v1">

<sourcesrc="Intermission-Walk-in.ogv"></source>

<sourcesrc="Intermission-Walk-in_512kb.mp4"></source>

</video>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航