HTML5添加图片和视频2-8

时间:2019-10-22
本文章向大家介绍HTML5添加图片和视频2-8,主要包括HTML5添加图片和视频2-8使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
 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