10.9 冯娜
学习日志
一、HTML5
1、HTML5是一种网页技术,是升级版。
二、新特征:
(1)用于绘画的canvas元素和svg元素
(2)用于媒介回访的video元素和audio元素
(3) 对本地离线存储的更好的支持
(4)新的特殊内容元素,比如:article、footer、header、nav、section
(5)新的表单控件,比如:range、date、time、email、url、search
三、视频:
(1)支持的视频格式:.ogv/.mp4/.webm
可以使用格式工厂转换视频格式。
(2)视频标签简洁语法:
浏览器不支持视频的提示文本
(3)视频标签标准语法(兼容处理):
<source src="视频文件URL地址" />
<source src="视频文件URL地址" />
<source src="视频文件URL地址" />
浏览器不支持视频的提示文本
(4)视频标签属性:controls(显示播放原生控件) loop (循环播放)autoplay(自动播放)
muted(静音播放) poster(在播放之前显示广告,但在暂停时不显示)preload(视频的预加载方式)
(5)使用DOM操作视频:
(6)object.fit
案例:
<video id="vid" loop autoplay controls >
<source src="../vid/1.mp4" type="video/mp4" ></source>
<source src="../vid/1.ogv" type="video/ogg"></source>
<source src="../vid/1.webm" type="video/webm"></source>
</video>
<button id="play" type="button"style="color: black; font-size: 30px;" ><img src="../vid/3.png" ></button>
<!-- <button id="pause" type="button"style="color: black; font-size: 30px;">暂停</button> -->
<!-- <audio src="../vid/4.mp3" controls>
</audio> -->
<script type="text/javascript">
var vdo=document.getElementById("vid")
var play=document.getElementById("play");
var img=document.querySelector('#play>img')
console.log(play)
// play.onclick=()=>{
// vdo.play()
// }
// pause.onclick=()=>{
// vdo.pause()
// }
play.onclick=()=>{
if(vdo.paused){
vdo.play()
img.src="../vid/3.png";
}else{
vdo.pause()
img.src="../vid/2.png";
}
}
</script>
四、音频:(与视频相似)
(1)支持的音频格式:.mp3、.wav、.ogg
(2)音频标签简洁语法:
浏览器不支持音频的提示文本
(3)音频标签标准语法(兼容处理)
<source src="音频文件URL"/>
<source src="音频文件URL"/>
<source src="音频文件URL"/>
浏览器不支持音频的提示文本
(4)音频标签属性
(5)使用DOM操作音频
五、全屏模式:
全屏模式可以让一个Element及其子元素占满整个屏幕。
(1)进入全屏模式:Element.requestFullscreen()
(2)退出全屏模式:document.exitFullscreen()
(3)全屏属性和事件:
判断当前浏览器是否允许设置全屏状态:document.fullScreenEnabled
获取全屏显示的网页元素:document.fullscreenElement
启动全屏或退出全屏时触发:fullscreenchange
启动全屏或退出全屏失败时触发:fullscreenerror
(4)全屏模式css
六、绘图:
1、网页中绘图技术(三种):
(1)canvas:通过 JavaScript 来绘制 2D 图形。canvas 是逐像素进行渲染的。在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注,如果其位置发生变化,那么整个场景也需要重新绘制,包括任何已经被图形覆盖的对象。
(2)Svg:是一种使用 XML 描述 2D 图形的语言。svg 基于 XML,这意味着 svg DOM 中的每个元素都是可用的。你可以为某个元素附加 JavaScript 事件处理器。在 svg 中,每个被绘制的图形均被视为对象。如果 svg 对象的属性发生变化,那么浏览器能够自动重现图形。
(3)webGL 3D:实现虚拟现实的一种技术,通过three.js可以实现更加快速的编程。
(4)canvas和svg的区别:绘图类型:canvas是2D位图,svg是矢量图;
如何绘图:canvas:使用js代码,svg:标签;
事件绑定:canvas:只能绑定在画布上;svg:每个图形都可以;
应用场景:canvas:网页特效、游戏,svg:地图。
2、canvas
七、智能定时器(window对象):
1、用于在浏览器中定时循环执行一个操作。
2、语法:window.requestAnimationFrame(callback)
3、停止定时器:window.cancelAnimationFrame(requestId)
案例:
(1)视频弹幕html:
(2)msg.js
(3)main.js
效果:
近期评论