20201009李权

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)

学习心得:

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

标签

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1