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>

1602250384104

四、音频:(与视频相似)

(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:

1602251530865

(2)msg.js

1602251603970

(3)main.js

1602251665128

效果:

1602251714398

标签

评论

this is is footer