1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>多媒体元素</title>
9 </head>
10
11 <body>
12 <img src="images/accept.png" alt="确认">
13 <br>
14 <img src="images/apple.png" alt="苹果">
15
16 <a href="http://edu.51cto.com" target="_blank">打开页面</a>
17
18 <hr>
19
20 <!-- 图片链接 -->
21 <a href="http://edu.51cto.com" target="_blank">
22 <img src="images/accept.png" alt="确认打开">
23
24 </a>
25 <hr>
26
27 <!-- 加载视频 -->
28 <video src="images/timessquare.webm" width="360" height="240" controls autoplay muted></video>
29
30 <h2>preload预加载并指定画面</h2>
31 <video src="images/1-6.mp4" width="360" height="240" controls preload="metadata" poster="images/2019.png"></video>
32
33 <!-- 兼容性问题 -->
34 <video width="360" height="240" controls preload="metadata" poster="images/2019.png">
35 <source src="images/timessquare.webm" type="video/webm">
36 <source src="images/timessquare.ogv" type="video/ogv">
37 <source src="images/timessquare.mp4" type="video/mp4">
38 </video>
39
40 </body>
41
42 </html>
知识兔