HTML5添加图片和视频2-8

行吟阁 2019-10-22

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>多媒体元素</title>
</head>

<body>
    <img src="images/accept.png" alt="确认">
    <br>
    <img src="images/apple.png" alt="苹果">

    <a href="http://edu.51cto.com" target="_blank">打开页面</a>

    <hr>

    <!-- 图片链接 -->
    <a href="http://edu.51cto.com" target="_blank">
        <img src="images/accept.png" alt="确认打开">

    </a>
    <hr>

    <!-- 加载视频 -->
    <video src="images/timessquare.webm" width="360" height="240" controls autoplay muted></video>

    <h2>preload预加载并指定画面</h2>
    <video src="images/1-6.mp4" width="360" height="240" controls preload="metadata" poster="images/2019.png"></video>

    <!-- 兼容性问题 -->
    <video width="360" height="240" controls preload="metadata" poster="images/2019.png">
        <source src="images/timessquare.webm" type="video/webm">
        <source src="images/timessquare.ogv" type="video/ogv">
        <source src="images/timessquare.mp4" type="video/mp4">
    </video>

</body>

</html>

HTML5添加图片和视频2-8

相关推荐