首頁手記 html5音頻視頻標簽(基礎)

html5音頻視頻標簽(基礎)

標簽：

Html/CSS Html5 CSS3

h5中增加了两个标签,分别为audio和video标签

audio音频播放标签

Audio(音频)
HTML5提供了播放音频文件的标准
control(控制器)
control属性供添加播放、暂停和音量控制

标签:
audio 定义声音
source 规定多媒体资源,可以是多个
代码展示:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>播放音频</title>
</head>
<body>
<button onclick="clickA()">播放/暂停</button>
<br/>
<audio id="audio" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="raw/1.mp3" controls="controls">你的浏览器不支持</audio>
<script>
       var a=document.getElementById("audio");
        function clickA(){
            if(a.paused){
                   a.play();     
    }else{
                    a.pause();
}
}
</script>
</body>
</html>

在介绍video标签之前,先说一个编解码工具,FFmpeg 官方网址:www.ffmpeg.org

video音频播放标签

Video(音频)
HTML5提供了播放音频文件的标准
control(控制器)
control属性供添加播放、暂停和音量控制
标签:
video 定义声音
source 规定多媒体资源,可以是多个

属性:
width:宽
height:高
代码展示:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>播放视频</title>
</head>
<body>
<button onclick="clickV()">播放/暂停</button>
<button onclick="clickBig()">放大</button>
<button onclick="clickSmall()">缩小</button>
<video id="video">你的浏览器不支持
<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="raw/3.mp4">
<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="raw/3.ogg">
</video>
<script>
       var a=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>
</body>
</html>

點擊查看更多內容