HTML5（二）音频视频画布
HTML5 Audio(音频)
定义和用法
<audio src="someaudio.wav" controls="controls"> 您的浏览器不支持 audio 标签。 </audio>
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
音频格式的MIME类型
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放。 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。 |
| muted | muted | 规定视频输出应该被静音。 |
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |
| src | url | 要播放的音频的 URL。 |
最小Demo代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>audio</title>
</head>
<body>
<audio src="someaudio.wav" controls="controls"> 您的浏览器不支持 audio 标签。 </audio>
</body>
</html>
src可以修改自己的本地路径，请注意调节音量再播放
《光》陈粒
您的浏览器不支持 audio 标签。
HTML5 Video(视频)
<video src="movie.mp4" controls="controls"> 您的浏览器不支持 video 标签。 </video>
视频格式
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 Audio/Video 方法
| 方法 | 描述 |
|---|---|
| addTextTrack() | 向音频/视频添加新的文本轨道 |
| canPlayType() | 检测浏览器是否能播放指定的音频/视频类型 |
| load() | 重新加载音频/视频元素 |
| play() | 开始播放音频/视频 |
| pause() | 暂停当前播放的音频/视频 |
只是常用的一些方法，具体用到更多再查。
最小Demo代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<video src="video.mp4" controls="controls"> 您的浏览器不支持 video 标签。 </video>
</body>
</html>
HTML5 Canvas
HTML5 canvas 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas>
创建canvas元素， 再使用 style 属性来添加边框。
颜色、样式和阴影
| 属性 | 描述 |
|---|---|
| fillStyle | 设置或返回用于填充绘画的颜色、渐变或模式 |
| strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 |
| shadowColor | 设置或返回用于阴影的颜色 |
| shadowBlur | 设置或返回用于阴影的模糊级别 |
| shadowOffsetX | 设置或返回阴影距形状的水平距离 |
| shadowOffsetY | 设置或返回阴影距形状的垂直距离 |
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 创建线性渐变（用在画布内容上） |
| createPattern() | 在指定的方向上重复指定的元素 |
| createRadialGradient() | 创建放射状/环形的渐变（用在画布内容上） |
| addColorStop() | 规定渐变对象中的颜色和停止位置 |
Canvas - 渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<div>
<div> 线性渐变:</div>
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>
<div>
<div> 径向/圆渐变:</div>
<canvas id="myCanvas2" width="200" height="200"></canvas>
</div>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
var c=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
// 创建渐变
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>
</body>
</html>
线条样式
| 属性 | 描述 |
|---|---|
| lineCap | 设置或返回线条的结束端点样式 |
| lineJoin | 设置或返回两条线相交时，所创建的拐角类型 |
| lineWidth | 设置或返回当前的线条宽度 |
| miterLimit | 设置或返回最大斜接长度 |
矩形
| 方法 | 描述 |
|---|---|
| rect() | 创建矩形 |
| fillRect() | 绘制“被填充”的矩形 |
| strokeRect() | 绘制矩形（无填充） |
| clearRect() | 在给定的矩形内清除指定的像素 |
路径
| 方法 | 描述 |
|---|---|
| fill() | 填充当前绘图（路径） |
| stroke() | 绘制已定义的路径 |
| beginPath() | 起始一条路径，或重置当前路径 |
| moveTo() | 把路径移动到画布中的指定点，不创建线条 |
| closePath() | 创建从当前点回到起始点的路径 |
| lineTo() | 添加一个新点，然后在画布中创建从该点到最后指定点的线条 |
| clip() | 从原始画布剪切任意形状和尺寸的区域 |
| quadraticCurveTo() | 创建二次贝塞尔曲线 |
| bezierCurveTo() | 创建三次方贝塞尔曲线 |
| arc() | 创建弧/曲线（用于创建圆形或部分圆） |
| arcTo() | 创建两切线之间的弧/曲线 |
| isPointInPath() | 如果指定的点位于当前路径中，则返回 true，否则返回 false |
Canvas - 路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>video</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
转换
| 方法 | 描述 |
|---|---|
| scale() | 缩放当前绘图至更大或更小 |
| rotate() | 旋转当前绘图 |
| translate() | 重新映射画布上的 (0,0) 位置 |
| transform() | 替换绘图的当前转换矩阵 |
| setTransform() | 将当前转换重置为单位矩阵。然后运行 transform() |
文本
| 属性 | 描述 |
|---|---|
| font | 设置或返回文本内容的当前字体属性 |
| textAlign | 设置或返回文本内容的当前对齐方式 |
| textBaseline | 设置或返回在绘制文本时使用的当前文本基线 |
| 方法 | 描述 |
|---|---|
| fillText() | 在画布上绘制“被填充的”文本 |
| strokeText() | 在画布上绘制文本（无填充） |
| measureText() | 返回包含指定文本宽度的对象 |
Canvas - 文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("小橘子ღ",10,100);
ctx.strokeText("Hi~ Canvas",10,50);
</script>
</body>
</html>
图像绘制
| 方法 | 描述 |
|---|---|
| drawImage() | 向画布上绘制图像、画布或视频 |
Canvas - 图像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<img id="scream" src="https://pic.cnblogs.com/avatar/1979230/20200321083100.png" alt="小橘子ღ">
<canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"> 您的浏览器不支持 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10)//若不显示画像则注释这行，取消注释下面三行
// img.onload = function(){
// ctx.drawImage(img, 10, 10)
// }
</script>
</body>
</html>
注意：这里有个坑，考虑到图片是从网络加载，如果 drawImage 的时候图片还没有完全加载完成，则什么都不做。即绘图失败。
所以我们应该保证在 img 绘制完成之后再 drawImage。
var img = new Image(); // 创建img元素
img.src = 'https://pic.cnblogs.com/avatar/1979230/20200321083100.png'; // 设置图片源地址
img.onload = function(){
ctx.drawImage(img, 0, 0)
}
像素操作
| 属性 | 描述 |
|---|---|
| width | 返回 ImageData 对象的宽度 |
| height | 返回 ImageData 对象的高度 |
| data | 返回一个对象，其包含指定的 ImageData 对象的图像数据 |
| 方法 | 描述 |
|---|---|
| createImageData() | 创建新的、空白的 ImageData 对象 |
| getImageData() | 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 |
| putImageData() | 把图像数据（从指定的 ImageData 对象）放回画布上 |
合成
| 属性 | 描述 |
|---|---|
| globalAlpha | 设置或返回绘图的当前 alpha 或透明值 |
| globalCompositeOperation | 设置或返回新图像如何绘制到已有的图像上 |
HTML5（二）音频视频画布的更多相关文章
- 【HTML5】音频视频
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 前端笔记之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性
一.HTML5简介 HTML 5 的第一份正式草案已于2008年1月22日公布.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 2014年10月29日,万维网联盟 ...
- html5-8 如何控制html5中的视频标签和音频标签
html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...
- HTML5 音频视频
HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...
- 测试开发之前端——No9.HTML5中的视频/音频
HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaS ...
- HTML5媒体（音频/视频）
摘要: 在HTML5出现之前,web媒体大部分通过Flash来实现.这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等.这就导致HTML5自己开始支持媒体功能.HTML5 DO ...
- html5之音频、视频(video&audio)
音频&视频 本篇为本人的学习笔记. 在Html5之前,浏览器对于视频和音频的处理并没有一个标准.因此在网页中看到的视频,都是通过第三插件的方式嵌入的,如:QuickTime.RealPlaye ...
- html5音频视频专题
html5音频视频专题 总结 1. 操作的就是video和audio两个对象,这两个对象有他们的属性和方法,通过对象的id就可以操作他们 <audio src="../video/琴箫 ...
- css总结16:HTML5 多媒体音频(Audio)视频(video )
1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...
随机推荐
- Java实现第九届蓝桥杯付账问题
付账问题 题目描述 [题目描述] 几个人一起出去吃饭是常有的事.但在结帐的时候,常常会出现一些争执. 现在有 n 个人出去吃饭,他们总共消费了 S 元.其中第 i 个人带了 ai 元.幸运的是,所有人 ...
- 【JAVA习题二十八】海滩上有一堆桃子，五只猴子来分。第一只猴子把这堆桃子凭据分为五份，多了一个，这只猴子把多的一个扔入海中，拿走了一份。第二只猴子把剩下的桃子又平均分成五份，又多了一个，它同样把多的一个扔入海中，拿走了一份，第三、第四、第五只猴子都是这样做的，问海滩上原来最少有多少个桃子？
package erase; import java.util.Scanner; public class 猴子分桃 { public static void main(String[] args) ...
- redis 数据删除策略和逐出算法
数据存储和有效期 在 redis 工作流程中,过期的数据并不需要马上就要执行删除操作.因为这些删不删除只是一种状态表示,可以异步的去处理,在不忙的时候去把这些不紧急的删除操作做了,从而保证 redis ...
- JS 姓氏，区域，消息组成的随机内容定时随机展示
var surname_g = "\u8D75\u94B1\u5B59\u674E\u5468\u5434\u90D1\u738B\u51AF\u9648\u891A\u536B\u848B ...
- Python itchat.get_chatrooms() 抓取群聊不全的问题
1 rooms = itchat.get_chatrooms() 2 f = codecs.open("3.txt","w","utf-8" ...
- 【01JMeter基础】线程组
线程组 我们存在接口请求的地方,在JMeter中我们使用最多的模块,分为 setUp线程组.线程组.tearDown线程组 setUp线程组:不论如何排序,都会在所有的线程组中被最早执行,如果有多个s ...
- cb39a_c++_STL_算法_for_each_transform_比较
cb39a_c++_STL_算法_for_each_transform_比较for_each() 速度快,不灵活transform() 速度慢, 非常灵活 STL算法-修改性算法for_each()c ...
- SpringBoot 启动配置原理
几个重要的事件回调机制 ApplicationContextInitializer SpringApplicationRunListener ApplicationRunner CommandLine ...
- Beta冲刺总结随笔
这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 团队名称 WeChair 这个作业要求在哪里 Beta冲刺 这个作业的目标 Beta冲刺 作业正文 如下 其他参考文献 项目预期 ...
- 一、Jenkins 安装(自动构建发布)
war 包方式安装 官方下载地址:https://jenkins.io/download/ ,下载war包,并上传到服务器(案例中是把war包放在了 /usr/local/jenkins 里面) 运行 ...