首页 > 网站开发 > JavaScript教程 >
-
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>允许设定可替换的视频/音频文件，供浏览器根据它对媒体类型或编码器的支持进行选择
语法示例：
|
1
2
3
4
|
<audio> <source src="Getit.ogg"> <source src="Getit.mp3"></audio> |
4.<embed/>
用于定义嵌入的内容， 如插件，也可以用了嵌入声音
语法<embed src=""/>，必须设置src属性
5.<canvas></canvas>
canvas是一个容器（画布），可以通过控制坐标在canvas上绘制图形，一般配合js使用能实现非常复杂的动画效果
canvas拥有多种绘制路径、矩形、圆形等，可以控制区域内每一个像素
语法示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!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> |
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>允许设定可替换的视频/音频文件，供浏览器根据它对媒体类型或编码器的支持进行选择
语法示例：
|
1
2
3
4
|
<audio> <source src="Getit.ogg"> <source src="Getit.mp3"></audio> |
4.<embed/>
用于定义嵌入的内容， 如插件，也可以用了嵌入声音
语法<embed src=""/>，必须设置src属性
5.<canvas></canvas>
canvas是一个容器（画布），可以通过控制坐标在canvas上绘制图形，一般配合js使用能实现非常复杂的动画效果
canvas拥有多种绘制路径、矩形、圆形等，可以控制区域内每一个像素
语法示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!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> |
本文链接： https://www.cnblogs.com/husa/p/13336972.html
