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>
原文：https://www.cnblogs.com/like2019/p/11719451.html