HTML5-视频和音频

Flash被HTML5取代在哪些方面？

音频和视频 —— <video>和<audio>

绘图 —— <canvas>

动画/游戏 —— <canvas>+定时器

统计图表 —— <canvas>、<svg>

客户端数据存储 —— WebStorage

2.HTML5新特性——视频播放

HTML5提供了一个新的标签<video>标签，用于播放视频。该标签默认是一个300*150的inline-block。使用方法：

<video>

</video>

VIDEO元素/对象的属性：

(1)src：指定要播放的视频的资源路径

(2)autoplay：false，是否自动播放

(3)controls：false，是否显示播放控件，提示：不同浏览器的播放控件外观不同

(4)currentTime：0，当前播放的时间点（s）

(5)duration：60，影片总时长（s）

(6)ended：false，是否播放到结尾

(7)loop：false，是否循环播放

(8)muted：false，是否静音

(9)volume：1，音量设置（0~1），对象属性，不用于标签

(10)paused：当前是否处于暂停状态

(11)poster：''，指定视频第一帧播放前的电影海报

(12)preload：指定视频预加载方案，可取值：

auto：默认值，自动预加载视频的宽高、时长、第一帧内容、并缓冲了一定的时长

metadata：元数据，只预加载视频的宽高、时长、第一帧内容

none：不预加载任何内容

VIDEO对象的方法：

play()：开始播放

pause()：暂停播放

VIDEO对象的事件：

onplay：视频开始播放（可能多种原因引起）

onpause：视频开始暂停（可能多种原因引起）

onplaying:

示例：

(1)不使用video默认的播放控件，使用自定义的按钮，控制视频的播放和暂停

(2)不论何种原因，影片一暂停即显示出广告图片；一播放广告图片就隐藏；提示：不能使用poster属性（影片海报只能在第一次播放之前显示一次）+

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4   <meta charset="UTF-8">
 5   <title></title>
 6   <style>
 7     .container {
 8       position: relative;
 9       text-align: center;
10     }
11     #btn {
12       position: absolute;
13       left: 50%;
14       top: 50%;
15       margin-left: -32px;
16       margin-top: -32px;
17       opacity: .9;
18       cursor: pointer;
19     }
20     #ad {
21       position: absolute;
22       left: 50%;
23       top: 50%;
24       margin-left: -200px;
25       margin-top: -150px;
26     }
27   </style>
28 </head>
29 <body>
30   <h3>视频播放</h3>
31   <div class="container">
32     <video src="res/birds.mp4" id="v4"></video>
33     <img src="img/2.jpg" id="ad">
34     <img src="img/play.png" id="btn">
35   </div>
36   <script>
37     v4.volume = 0.1;
38     /**为播放按钮绑定事件监听**/
39     btn.onclick = function(){
40       if(v4.paused){
41         v4.play();
42         btn.src = 'img/pause.png';
43       }else {
44         v4.pause();
45         btn.src = 'img/play.png';
46       }
47     }
48 
49     /**为父容器绑定鼠标移出事件**/
50     var container = document.querySelector('.container');
51     //container.onmouseover
52     container.onmouseenter = function(){
53       btn.style.display = 'block';
54     }
55     container.onmouseleave= function(){
56       btn.style.display = 'none';
57     }
58 
59     /**监视视频的播放和暂停，修改广告图片的图片**/
60     v4.onplay = function(){ //不论何种原因
61       ad.style.display = 'none';
62     }
63     v4.onpause = function(){ //不论何种原因
64       ad.style.display = 'block';
65     }
66   </script>
67 </body>
68 </html>

View Code

效果图如下：

3.HTML5新特性——音频播放

HTML5提供了一个新的标签<audio>标签，用于播放音频。该标签若没有controls属性，则默认display:none；反之则是一个300*30的inline-block。使用方法：

<audio>

</audio>

AUDIO元素/对象的属性：