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

效果：