1.音频播放
audio(音频)
html5提供了播放音频文件的标准
<audio src="anli.mp3" controls="controls">您的浏览器不支持</audio>
自定义控件
<button onclick="clickA()">播放/暂停</button>
<audio src="anli.mp3" id="audio">您的浏览器不支持</audio>
<script>
var a=document.getElementById("audio");
function clickA(){
if(a.paused){
a.play();
}else{
a.pause();
}
}
</script>
cotrol(控制器)
control属性提供添加播放、暂停和音量控件
标签
<audio> 定义声音
<source> 规定多媒体资源,可以是多个
2.编解码工具
针对不同浏览器支持的多媒体播放格式,我们需要编解码工具对多媒体格式进行转换。
FFmpeg(一款免费开源的编解码工具)
网址:www.ffmpeg.org
3.视频播放
video(视频) : HTML5提供了展示视频的标准
control(控制器) : control 属性提供添加播放、暂停和音量控件
标签 : <video> 定义声音 <source> 规定多媒体资源,可以是多个
属性 : width : 宽 height : 高
<video src="anli.mp4" controls="controls">您的浏览器不支持</video>
火狐浏览器不支持mp4格式,支持ogg格式
<video controls="controls">
<source src="anli.mp4">
<source src="anli.ogg">
您的浏览器不支持
</video>
自定义
<button onclick="clickV()">播放/暂停</button>
<button onclick="clickBig()">放大</button>
<button onclick="clickSmall()">缩小</button>
<br/>
<video id="video" width="500" height="400">
<source src="anli.mp4">
<source src="anli.ogg">
您的浏览器不支持
</video>
<script>
var v=document.getElementById("video");
function clickV(){
if(v.paused){
v.play();
}else{
v.pause();
}
}
function clickBig(){
v.width = 800;
v.height = 800;
}
function clickSmall(){
v.width = 300;
v.height = 300;
}
</script>