HTML5_02之视频、音频、Canvas
1、HTML5新特性之视频播放——video:
①例:<video src=""></video>
②video标签默认为300*150的inline-block;
③成员属性:
autoplay:是否自动播放;
controls:是否显示播放控件;
currentTime:当前播放到的时间;
duration:总时长;
defaultMuted:默认是否静音;
loop:是否自动循环播放;
muted:当前是否静音;
paused:当前是否处于暂停状态;
poster:"",在视频播放前的显示图片;
volumn:当前播放音量;
preload:预加载内容;取值:auto——自动预加载视频内容,并缓冲一段;metadata——仅预加载影片元素据(宽高时长);none——不预加载任何数据;
④成员方法:
play();——视频开始播放,paused属性变为false;
paused();——视频暂停,paused属性变为true;
⑤成员事件:
onplay:fn——当调用v.paly()方法时触发;
onpause:fn——当调用v.pause()方法时触发;
2、HTML5新特性之音频播放——audio:
①例:<audio src=""></audio>
②audio标签默认为300*30的inline-block,若不显示播放控件,则display为none;
③成员属性:
autoplay:是否自动播放;
controls:是否显示播放控件;
currentTime:当前播放到的时间;
duration:总时长;
defaultMuted:默认是否静音;
loop:是否自动循环播放;
muted:当前是否静音;
paused:当前是否处于暂停状态;
poster:"",在视频播放前的显示图片;
volumn:当前播放音量;
preload:预加载内容;取值:auto——自动预加载音频元素据内容,并缓冲一段;metadata——仅预加载音频元素据;none——不预加载任何音频数据;
④成员方法:
play();——音频开始播放,paused属性变为false;
paused();——音频暂停,paused属性变为true;
⑤成员事件:
onplay:fn——当调用v.paly()方法时触发;
onpause:fn——当调用v.pause()方法时触发;
⑥IOS系统自带Safari浏览器不支持audio标签,可使用隐藏的video代替;
3、HTML5新特性之Canvas绘图:
①Canvas:画布,默认为300*150的inline-block,设定画布的宽高不能使用CSS Style,只能使用width和height属性;
②Canvas画布本身不能绘制内容,只用于承载被绘制的内容,画笔使用原生JS 创建:var ctx=canvas.getContext('2d');
③Context对象常用属性:
fillStyle:"#000000"——填充样式;
strokeStyle:"#000000"——描边/轮廓样式;
font:"10px sans-serif"——字体大小、类型
textAlign:"start"——文本对齐方式;
textBaseline:"alphabetic"——文本基线;
globalAlpha:——全局不透明度;
lineWidth:线/描边宽度;
shadowOffsetX:阴影在x轴的偏移量;
shadowOffsetY:阴影在y轴的偏移量;
shadowColor:"rgba(0,0,0,0)"——阴影颜色及透明度;
shadowBlur:阴影模糊半径;
④Context对象常用方法:
arc():绘制一个圆弧/圆形;
beginPath():开始绘制一条路径;
closePath():闭合一条路径;
fill():对路径进行填充;
stroke():对路径进行描边;
moveTo():移动到某一点;
lineTo():绘制到另一点的一条线段;
fillRect():填充一个矩形;
strokeRect():描边一个矩形;
clearRect():清空一个矩形范围内的所有内容;
fillText():填充一个字符串;
strokeText():描边一个字符串;
drawImage():绘制图像;
⑤创建一个线性渐变对象:
var g=ctx.createLinearGradient(x1,y1,x2,y2);
g.addColorStop(offset1,color1);
g.addColorStop(offset2,color2);
⑥绘制矩形(rectangle):定位点位于左上角
ctx.fillStyle="#000"/渐变对象;——填充样式;
ctx.strokeStyle="#000"/渐变对象;——描边样式;
ctx.lineWidth=;——描边宽度;
ctx.fillRect(x,y,w,h);——填充一个矩形;
ctx.strokeRect(x,y,w,h);——描边一个矩形;
ctx.clearRect(x,y,w,h);——清除一个矩形范围内的内容;
⑦绘制文本(text):文本定位点在整个字符串文本基线最左边
ctx.textBaseline="alphabetic";//文本基线,可取值为:top/middle/alphabetic/bottom;
ctx.font="10px sans-serif";
ctx.fillText(txt,x,y);
ctx.strokeText(txt,x,y);
ctx.measureText(txt).width;//测量文本宽度;
转载于:https://www.cnblogs.com/Jupiter258/p/6058121.html
HTML5_02之视频、音频、Canvas相关推荐
- python mp4提取音频加入另一段视频_使用 PHP-FFMpeg 操作视频/音频文件
做音频合成的时候找到的一个php操作ffmpeg 的类库.GitHub地址:https://github.com/PHP-FFMpeg/PHP-FFMpeg/.本文的例子大部分都是上面的 在使用之前请 ...
- AVFoundation – AVAssetTrack 获取视频 音频信息
目录 一.前言 1.AVAsset 2.AVAssetTrack 3.AVComposition / AVMutableComposition 4.AVMutableVideoComposition ...
- HTML5 API详解(13):video/audio 视频/音频
video的使用方法: <video autoplay="autoplay" controls="controls" width="800&qu ...
- [原创]使用python对视频/音频文件进行详细信息采集,并进行去重操作
[原创]使用python对视频/音频文件进行详细信息采集,并进行去重操作 转载请注明出处 一.关于为什么用pymediainfo以及pymediainfo的安装 使用python对视频/音频文件进行详 ...
- PowerPoint ppt 触发器 自定义动画 视频 音频 播放 停止
PowerPoint ppt 触发器 自定义动画 视频 音频 播放 停止 ppt 中添加视频或者音频后,总是希望可以自由控制播放,然后配合讲解,实现较好的演示效果 那么这需要用到触发器(直接用播放控件 ...
- PHP-FFMpeg 操作视频/音频文件
做音频合成的时候找到的一个php操作ffmpeg 的类库.GitHub地址:https://github.com/PHP-FFMpeg/PHP-FFMpeg/.本文的例子大部分都是上面的 在使用之前请 ...
- 使用 PHP-FFMpeg 操作视频/音频文件(转)
原文:https://blog.jam00.com/article/info/25.html 做音频合成的时候找到的一个php操作ffmpeg 的类库.GitHub地址:https://github. ...
- laravel-admin引用wangEditor编辑器 使用二:上传视频/音频(2)
完整的wangEditor.js代码 (function (global, factory) {typeof exports === 'object' && typeof module ...
- android 多人视频,Android QQ 5.0 正式版:全新界面、精彩动态、多人视频/音频
Android QQ 5.0 正式版发布,包括新的用户界面.动态内容自定义.多人视频/音频/文件传输等新功能.Android 用户可以点击链接下载体验,iOS 用户还需等待正式上架 App Store ...
- [翻译]Gallery Server Pro ----用于分享相片,视频,音频及其他媒体的ASP.NET相册[Carol]...
原文地址:http://www.codeproject.com/aspnet/Gallery_Server_Pro.asp 原作者: Roger Martin Gallery Server Pro下载 ...
最新文章
- 使用Python、OpenCV计算轮廓的中心
- HDU - 3333 Turing Tree 线段树区间不同值和+详解+思想
- DIY强大的虚拟化环境-技术可行性部分
- C 语言 常见数据类型解析
- 解决错误:Re-installation failed due to different application signatures
- JAVA程序设计心得001
- IDEA中一个工程多个模块(module)分别提交到不同的git服务器
- git创建一个自己的本地仓库
- java 设置组件填充_Java学习笔记(三)Java2D组件
- Centos7升级Python2到Python3
- 10款白嫖网站笔记整理
- 特征码的使用办法_徐涛高频问题回答,刘晓艳阅读做题方法,汤家凤10套卷使用方法...
- NXP MC9S12中断寄存器配置说明
- java经典算法(八)---zws
- 网络子系统33_网桥设备的配置更新
- 集合添加元素python_集 - 百度文库
- python发送邮件 退回_用python发邮件给gmail用户,被gmail当成spam退回
- 多么痛的领悟,只有程序员才知道的12个人艰不拆的真相
- CDMA 短信中心号码
- bat脚本命令的学习