2023年7月11日发(作者：)

⾃定义播放器全屏操作tFullScreen() 开启全屏显⽰FullScreen() 关闭全屏显⽰注意：cancelFullScreen() 的调⽤时documenth5的api兼容问题由于其兼容性原因，不同浏览器需要添加前缀如：webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如⽕狐浏览器。Screen检测当前是否处于全屏不同浏览器需要添加前缀IsFullScreen、ullScreen⾃定义播放器多媒体API⾳频和视频API⼀致⽅法⽅法addTextTrack()canPlayType()load()play()pause()属性描述向⾳频/视频添加新的⽂本轨道检测浏览器是否能播放指定的⾳频/视频类型重新加载⾳频/视频元素开始播放⾳频/视频暂停当前播放的⾳频/视频属性audioTracksautoplaybufferedcontrollercontrolscrossOrigin描述返回表⽰可⽤⾳轨的 AudioTrackList 对象设置或返回是否在加载完成后随即播放⾳频/视频返回表⽰⾳频/视频已缓冲部分的 TimeRanges 对象返回表⽰⾳频/视频当前媒体控制器的 MediaController 对象设置或返回⾳频/视频是否显⽰控件（⽐如播放/暂停等）设置或返回⾳频/视频的 CORS 设置currentSrc属性currentTimedefaultMuteddefaultPlaybackRatedurationendederrorloopmediaGroupmutednetworkStatepausedplaybackRateplayedpreloadreadyStateseekableseekingsrcstartDatetextTracksvideoTracksvolume事件返回当前⾳频/视频的 URL描述设置或返回⾳频/视频中的当前播放位置（以秒计）设置或返回⾳频/视频默认是否静⾳设置或返回⾳频/视频的默认播放速度返回当前⾳频/视频的长度（以秒计）返回⾳频/视频的播放是否已结束返回表⽰⾳频/视频错误状态的 MediaError 对象设置或返回⾳频/视频是否应在结束时重新播放设置或返回⾳频/视频所属的组合（⽤于连接多个⾳频/视频元素）设置或返回⾳频/视频是否静⾳返回⾳频/视频的当前⽹络状态设置或返回⾳频/视频是否暂停设置或返回⾳频/视频播放的速度返回表⽰⾳频/视频已播放部分的 TimeRanges 对象设置或返回⾳频/视频是否应该在页⾯加载后进⾏加载返回⾳频/视频当前的就绪状态返回表⽰⾳频/视频可寻址部分的 TimeRanges 对象返回⽤户是否正在⾳频/视频中进⾏查找设置或返回⾳频/视频元素的当前来源返回表⽰当前时间偏移的 Date 对象返回表⽰可⽤⽂本轨道的 TextTrackList 对象返回表⽰可⽤视频轨道的 VideoTrackList 对象设置或返回⾳频/视频的⾳量事件abortcanplaycanplaythroughdurationchangeemptiedendederrorloadeddataloadedmetadata当⾳频/视频的加载已放弃时当浏览器可以播放⾳频/视频时描述当浏览器可在不因缓冲⽽停顿的情况下进⾏播放时当⾳频/视频的时长已更改时当⽬前的播放列表为空时当⽬前的播放列表已结束时当在⾳频/视频加载期间发⽣错误时当浏览器已加载⾳频/视频的当前帧时当浏览器已加载⾳频/视频的元数据时loadstartpauseplayplayingprogressratechangeseekedseekingstalledsuspendtimeupdate事件当浏览器开始查找⾳频/视频时当⾳频/视频已暂停时当⾳频/视频已开始或不再暂停时描述当⾳频/视频在已因缓冲⽽暂停或停⽌后已就绪时当浏览器正在下载⾳频/视频时当⾳频/视频的播放速度已更改时当⽤户已移动/跳跃到⾳频/视频中的新位置时当⽤户开始移动/跳跃到⾳频/视频中的新位置时当浏览器尝试获取媒体数据，但数据不可⽤时当浏览器刻意不获取媒体数据时当⽬前的播放位置已更改时当⾳量已更改时当视频由于需要缓冲下⼀帧⽽停⽌volumechangewaiting细节注意/*全屏操作后 ⾃带的控制栏会显⽰ 在显⽰的时候隐藏*/video::-webkit-media-controls { display: none !important;}.controls { width: 700px; height: 40px; background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; position: absolute; left: 50%; margin-left: -350px; bottom: 5px; /*⽐全屏的状态下的视频元素⾼*/ z-index: 1; opacity: 1;}本地存储使⽤：1. 设置cookie数据： = '键=值;Expires=⽇期'2. 获取cookie数据：1、如果没有设置有效期，会话结束就失效2、如果设置有效期，依据有效期时间失效3、在会话过程中，每次请求在报⽂的头部会携带cookie信息nStorage使⽤：1.获取sessionStorage的长度：2.根据对应的索引去获取对应sessionStorage的key的值：(索引);3.添加/编辑sessionStorage的内容：m(键,值);4.根据对应的key获取对应的的value：m(键);5.根据对应的key删除记录：Item(键);6.清空存储：();1、⽣命周期为关闭浏览器窗⼝2、在同⼀个窗⼝(页⾯)下数据可以共享torage使⽤：1.获取localStorage的长度：2.根据对应的索引去获取对应localStorage的key的值：(索引);3.添加/编辑localStorage的内容：m(键,值);4.根据对应的key获取对应的的value：m(键);5.根据对应的key删除记录：Item(键);6.清空存储：();1、永久⽣效，除⾮⼿动删除 关闭页⾯也会存在2、可以多窗⼝（页⾯）共享（同⼀浏览器可以共享）总结特性数据⽣命期存放数据⼤⼩与服务器通信易⽤性共同点代码⽰例cookiesessionStoragelocalStorage除⾮数据被清除，否则⼀直存在默认关闭浏览器失效页⾯会话期间可⽤4K左右（因为每次http请求都会携带cookie）⼀般5M或更⼤约20M由对服务器的请求来传递，每次都会携带在HTTP头中，如果使⽤cookie保存过多数据会带来性能问题cookie需要⾃⼰封装setCookie，getCookie都是保存在浏览器端，和服务器端的session机制不同数据不是由每个服务器请求传递的，⽽是只有在请求时使⽤数据，不参与和服务器的通信可以⽤源⽣接⼝