1.video
1、简化版写法：兼容性差<video src="" controls> </video>
2、视频标签规范语法（兼容解决）
`<video> <source src="视频文件URL地址" /> <source src="视频文件URL地址" /> <source src="视频文件URL地址" /> 浏览器不反对视频的提醒文本</video>`//浏览器将应用第一个可辨认的视频3、视频标签属性
- width 宽度
- height 高度
以下取值为布尔值：
- controls 显示播放原生控件（兼容性极差）
- loop 循环播放
- autoplay 自动播放视屏（大多数浏览器禁用此性能）
- muted 静音播放
- poster 在视频播放之前显示广告，取值为广告的url（毛病：如果暂停视频不能显示广告图片）
- preload 视频的预加载形式默认auto（留神：设置该属性后，则视频在页面加载时进行加载，并准备播放。如果应用 " autoplay "，则疏忽该属性）
4、应用DOM操作视频
HTMLVideoElement属性
//1. 获取视频对象var vdo = document.getElmentById("video")//2. 获取/设置对象的宽度/高度（如果自身没有设置 就是0）vdo.widthvdo.height//3. 获取视频对象的原始宽度、高度vdo.videoWidthvdo.videoHeight//留神：如果要获取视频对象的原始宽度和高度必须在loadeddata事件实现后能力应用vdo.addEventListener("loadeddata",()=>{ console.log(vde.videoWidth) console.log(vde.videoHeight)})//loadeddata 事件示意曾经加载实现视频的第一帧，当加载完视频的第一帧当前，视频的原始宽度和高度能力失常拜访//4. 获取视频海报帧vdo.poster = 'myvideo.mp4'HTMLMediaElement属性<script>//autoplay 是否自动播放//muted 是否静音//controls 是否显示播放控件//loop 是否循环播放//src 用于设置媒体文件的url地址//volume 用于获取、设置媒体的音量（取值范畴[0,1]）vdo.volume = 0.6//playbackRate 获取、设置媒体的播放速率，1.0为失常速率//paused 用于获取媒体对象是否在暂停，返回值为布尔值//ended 用于获取媒体对象是否播放结束//currentTime 用于获取、设置媒体对象的以后播放工夫（单位为秒）//duration 用于获取媒体对象的总时长（单位s）//办法play() 用于实现媒体的播放vdo.play()//办法pause() 用于实现媒体的暂停veo.pause()var play = document.getElementById("play")play.onclick = ()=>{ //判断视频是否为暂停 if(vdo.paused==false){ vdo.pause(); }else{ vdo.play(); }}//事件//媒体对象播放时触发vdo.addEventListener("play",()=>{})//媒体对象暂停时触发vdo.addEventListener("pause",()=>{})//媒体对象播放结束后触发vdo.addEventListener("ended",()=>{})//媒体文件的第一帧加载实现后被触发vdo.addEventListener("loadeddata",()=>{})//媒体对象的currentTime属性发生变化时调用vdo.addEventListener("timeupdata",()=>{})//媒体对象加载完结时触发vdo.addEventListener("canplaythrough",()=>{})</script>2.audio
1、音频标签规范语法
<audio> <source src="音频文件URL"/> <source src="音频文件URL"/> <source src="音频文件URL"/> 浏览器不反对音频的提醒文本</audio>2、音频标签属性
<script> //controls //autoplay //muted //loop //preload //和视频是一样的</script>3、HTMLAudioElement
构造函数：var ado = new Audio([音频文件的URL地址])
==> 1. var ado=new Audio("./myaudio.mp3");2.ado.controls=true;3.document.body.appendChild(ado)
4.HTMLMediaElement
3. 全屏模式（兼容性厌恶）
1、全屏模式兼容写法
<script>//进入全屏模式兼容写法function requestFullScreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if(element.msRequestFullscreen) { element.msRequestFullscreen(); }}//启动全屏：//整个页面：requestFullScreen(document.documentElement);//某个页面元素requestFullScreen(document.getElementById("vdo"));//退出全屏模式兼容性写法function exitFullScreen() { if(document.exitFullscreen) { document.exitFullscreen(); } else if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if(document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if(document.msExitFullscreen){ document.msExitFullscreen(); }}//退出//exitFullscreen();p1.onclick = ()=>{exitFullscreen()}</script>2、全屏属性和事件
<script> //判断以后浏览器是否容许设置全屏状态 document.fullScreenEnabled //获取全屏显示的网页元素 document.fullscreenElement //启动全屏或退出全屏时触发 fullscreenchange//有兼容性 //启动全屏或退出全屏失败时触发 fullscreenerror//有兼容性</script>4.canvas
1、通过标签创立画布<canvas id="canvas" height:"800"; width:"800"></canvas>
2、通过js程序获取画布画笔
<script> var cvs = document.getElementById("canvas") var ctx = cvs.getContext(2D)</script>3、CanvasRenderingContext2D对象
1.绘制图形
<script> //1. 绘制空心矩形（描边矩形） ctx.strokeRect(x,y,width,height) //2. 绘制实心矩形（填充矩形） ctx.fillRect(x,y,width,height) //所有画笔款式要在绘制之前写才会失效！！！！！！！！！ //3. 获取/设置描边矩形色彩 //获取： ctx.strokeStyle //设置： ctx.strokeStyle="#f00" //4. 获取/设置填充矩形色彩 //获取： ctx.fillStyle //设置： ctx.fillStyle="#f00" //5. 获取/设置画笔透明度 //获取： ctx.globalAlpha //设置：(取值0-1) ctx.globalAlpha=0.4</script>2.绘制文本
<script> //1. 绘制描边文本 ctx.strokeText(text,x,y) //2. 绘制填充(实体)文本 ctx.fillText(text,x,y) //3. 获取/设置文本款式 //设置： ctx.font="字号 字体"; //获取： ctx.font //4. 获取/设置文本的程度对齐形式 //设置： ctx.textAlign="center"; //获取： ctx.textAlign //5. 获取/设置文本的垂直对齐形式（基线地位） //设置： ctx.textBaseline="top" //alphabetic 默认，文本基线是一般的字母基线 //top 文本基线是em方框的顶端 //middle 文本基线是em方框的正中 //ideographic 文本基线是表意基线 //bottom 文本基线是em方框的底部 //hanging 文本基线是悬挂基线 //获取： ctx.textBaseline //返回蕴含指定文本宽度的对象 ctx.measureText(text).width; //text：要测量的文本</script>3.清空矩形范畴内所有元素
<script> ctx.clearRect(x,y,width,height) //个别都是革除整个画布，重绘画布</script>4.门路
<script> //绘制门路写终点和起点 ctx.moveTO(x,y) ctx.lineTo(x,y) ctx.stroke()//绘制已定义门路 ctx.strokeStyle="color" 绘制门路色彩 ctx.fill()//填充已有门路 ctx.fillStyle="color" //填充色彩</script>