[html5] 学习笔记-html5音频视频

HTML5 最大的新特色之一就是支持音频和视频。在 HTML5 之前,我们必须使用插件如 Silverlight  或 Flash 来实现这些功能。在 HTML5 中,可以直接使用新标签< audio> 和 < video>将音频和视频嵌入到页面。

1、音频播放

Audio(音频),html5提供了播放音频文件的标准

control(控制器),龚添加播放、暂停和音量控件

标签:<audio> 定义声音;<source>,定义多媒体资源,可以是多个

 1 <body>
 2     <!--使用浏览器自带播放控件-->
 3    <audio src="catelog/1.mp3" controls="controls"></audio>
 4 
 5    <!--自定义播放控件-->
 6    <button onclick="clickA()">播放/暂停</button>
 7    <audio id = "audio" src="catelog/1.mp3"></audio>
 8    <script>
 9            var state = document.getElementById("audio");
10            function clickA() {
11                if (state.paused) {
12                    state.play();
13                }else{
14                    state.pause();
15                }
16            }
17    </script>
18 </body>

 

2、编解码工具

不同的浏览器支持的视频格式不同,chrome支持mp4格式,而safari支持ogg格式,因此需要有编解码工具来进行转码。

FFmpeg:www.ffmpeg.org  使用得非常广泛的一款工具,大部分编解码工具是使用它做内核

(使用方法待补充)

 

3、视频播放

Video(视频):html5提供了展示视频的标准

control(控制器):control属性提供添加播放、暂停和音量控件

标签:<video>定义声音  <source>规定多媒体资源,可以是多个

属性:width 宽    height 高

 1 <body>
 2     <video src="1.mp4" controls="controls"></video>
 3 
 4     <!--让浏览器全部兼容,则把所有格式的文件都放入-->
 5     <video controls="controls">
 6         <source src="1.mp4">
 7         <source src="1.ogg">
 8     </video>
 9 
10     <!--自定义播放器-->
11     <button onclick="clickV()">播放/暂停</button>
12     <button onclick="clickBig()">放大</button>
13     <button onclick="clickSmall()">缩小</button>
14     <video id="video" width="500px" height="300px">
15         <source src="1.mp4">
16         <source src="1.ogg">
17     </video>
18     <script>
19         var v = document.getElementById("video");
20         function clickV() {
21             if (v.paused) {
22                 v.play();
23             }else{
24                 v.pause();
25             }
26         }
27         function clickBig(){
28             v.width = 800;
29             v.height = 800;
30         }
31         function clickSmall(){
32             v.width = 300;
33             v.height = 100;
34         }
35     </script>
36 </body>

 

你可能感兴趣的:([html5] 学习笔记-html5音频视频)