HTML5：

video：

属性：

width：宽度

height:高度

loop：循环播放

autoplay:自动播放

controls:控制器

muted:静音

poster:

在播放视频之前显示广告，取值为广告的URL地址；

缺点：暂停视频不会显示该广告

preload:视频的预加载

none:不预加载任何数据，即不缓存视频，尽可能减少流量的浪费。

metadata :只预加载视频时长，视频的第一帧画面，视频的宽高信心

auto:浏览器尽可能的下载视频文件，使其播放流畅，但是会造成网络流量的浪费

注意：设置该属性之后，视频会在页面加载的时候的进行加载，并且预备播放，如果使用“autoplay” ，则忽略该属性

HTMLMediaElement

元素：

autoplay：自动播放，用于获取/设置媒体对象是否自动播放

muted:用于获取/设置媒体对象在播放是否静音

controls:用于获取/设置媒体对象在播放时是否显示播放控件

loop:用于获取/设置媒体对象是否循环播放

src:用于获取/设置媒体软件的URL地址

volume:用于获取/设置媒体的音量（取值范围[0,1]）

playbackRate 用于获取/设置的媒体的播放速率，如果值为1，为正常速率，如果小于1低于正常速率，否则高于正常速率

paused:用于获取媒体对象是否在暂停，返回值为布尔值

ended:用于获取媒体对象是否播放完毕

currentTime:用于获取媒体的当前的播放时间（单位为妙）

duration：用于获取对象的总时长（单位为秒，必须要等到视频的第一帧加载完成）

方法：

play() 用于实现媒体的播放

pause()用于实现媒体的暂停

    let paused = document.querySelector(".paused");
        let play = document.querySelector(".play");
        let vdo = document.querySelector("video");
        let muted = document.querySelector('.muted');
        play.addEventListener('click',()=>{
            play.style.display = "none";
            paused.style.display = "block"
            vdo.play()
        })
        paused.addEventListener('click',()=>{
            play.style.display = "block";
            paused.style.display = "none"
            vdo.pause()
        })
        muted.addEventListener('click',function(){
            if(vdo.muted){
                vdo.muted = false;
            }else{
                vdo.muted = true;
            }
            
        })

事件：

play 在媒体播放时触发

paused 在媒体暂停时触发

ended 在媒体播放结束触发

loadeddata 在媒体文件的第一帧加载完成后被触发

timeupdata 在媒体对象的currentTime属性发生变化时触发

canplaythrough 在媒体对象加载结束时触发

Object-fit:

作用：一般指定元素的内容应该如何去适应指定容器的高度和宽度，一般用于img和video标签一般用于对这些元素进行保留原始比列的剪切，缩放或直接进行拉伸

fill 填充，默认值，不保证原有的比例额，将视频拉伸操作填满父元素

contain 包含，保持原有视频比例，内容被缩放，父元素可能有空白区域

cover 覆盖，保持原有视频比例，宽度和高度至少有一个与父元素一致

none：保留原有元素的内容的长度和宽度，也就是说内容不会被重置

scale-down：保持原有尺寸比例，内容的尺寸与none与contain中的一个相同，取决于他们两个之间得到的对象尺寸会更小一些。

智能定时器：

作用：用于在浏览器中定时循环执行一个操作

优点：

1. 该方法充分利用好显示器的刷新频率，不会出现卡顿，丢帧的现象

   注意：1. 普通的笔记本为60hz

   动画原理：计算机没16.7ms刷新一次，由于人眼的视觉停留，所以看起来是流畅移动的

   函数节流：在高频率事件中，为了防止在一个刷新间隔内发生多次函数执行，使用requesAnimationFrame可保证每个刷新间隔内，函数只执行一次，这样既能保证流畅性，也能更好的节省函数执行的开销

语法：

window.requestAnimationFrame(callback)

一次性定时器：function(){...} requestAnimationFrame(fn)

周期性定时器 function fn(){requestAnimationFrame(fn)}

停止定时器

window.camcelAnimationFrame(requestld)

学习心得：

今天的弹幕效果还是有点不明白