WEB前端第七课——视频、音频、图形 / 四六文摘

1.<video></video>

　　用于定义视频，如影视片段

　　语法<video src="XXXmovie.mp4" controls></video>

　　支持视频格式：mp4、ogg移动端、webM高清

　　常用属性：

　　　　　　src，视频的地址url

　　　　　　autoplay，视频就绪后自动播放

　　　　　　controls，向用户显示播放器控件

　　　　　　width，设置视频的播放器的宽度

　　　　　　height，设置视频的播放器的高度

　　　　　　loop，定义自动循环播放，默认无限循环，属性值可设置次数

　　　　　　muted，定义音频输出默认为静音

　　　　　　poster，设定视频下载时显示的图像，或在用户点击播放按钮前显示的图像，值为url

　　　　　　preload，视频在页面加载时进行加在，并预备播放，如果使用“autoplay”则忽略该属性

2.<audio></audio>

　　用于定义声音，如音乐

　　语法<audio src="xxxmusic.mp3" autoplay></audio>

　　支持音频格式：mp3、ogg、wav

　　常用属性与video类似

　　　　　　src，视频的地址url

　　　　　　autoplay，视频就绪后自动播放

　　　　　　controls，向用户显示播放器控件

　　　　　　loop，定义自动循环播放，默认无限循环，属性值可设置次数

　　　　　　muted，定义音频输出默认为静音

　　　　　　preload，视频在页面加载时进行加在，并预备播放，如果使用“autoplay”则忽略该属性

3.<source></source>

　　为媒介元素（如<video>和<audio>）定义媒介资源

　　<source>允许设定可替换的视频/音频文件，供浏览器根据它对媒体类型或编码器的支持进行选择

　　语法示例：

<audio>
        <source src="Getit.ogg">
        <source src="Getit.mp3">
    </audio>

4.<embed/>

　　用于定义嵌入的内容，如插件，也可以用了嵌入声音

　　语法<embed src=""/>，必须设置src属性

5.<canvas></canvas>

　　canvas是一个容器（画布），可以通过控制坐标在canvas上绘制图形，一般配合js使用能实现非常复杂的动画效果

　　canvas拥有多种绘制路径、矩形、圆形等，可以控制区域内每一个像素

　　语法示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布测试</title>
    <!-- 通过css设置背景颜色 -->
    <style type="text/css">
        canvas{
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <!--创建画布，默认为无色填充的一个矩形区域-->
    <canvas id="canvastest" width="600" height="600">
        您的浏览器版本过低，不支持canvas！
    </canvas>
</body>
</html>

WEB前端第七课——视频、音频、图形

相关推荐