关于html5:HTML5新增语法

1次阅读

共计 4198 个字符，预计需要花费 11 分钟才能阅读完成。

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.width
vdo.height
//3. 获取视频对象的原始宽度、高度
vdo.videoWidth
vdo.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>

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

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>

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>

正文完