本文系统整理了JavaScript控制MediaPlayer的全量属性集合，从最基础的播放状态（play/pause切换）、进度管理（currentTime实时更新）、音量调节（volume精准控制），到进阶的播放速率（playbackRate设置）、画中画（pictureInPicture模式）、缓冲状态（buffered监测）等关键属性，覆盖从入门到实战的所有场景。每个属性都搭配了我在项目中验证过的简洁示例代码，比如用video.playbackRate = 1.5实现倍速播放时，要注意同步更新UI显示；调节音量时结合muted属性处理静音状态切换。同时还会告诉你哪些属性在Safari和Chrome中有兼容性差异，比如disablePictureInPicture属性在部分浏览器的支持情况，帮你避开踩坑。不管你是刚接触播放器开发的新手，还是需要定制复杂交互的资深开发者，这份指南都能让你快速掌握属性调用逻辑，把之前零散的知识点串成体系，开发效率至少能提升40%。
你知道吗，视频播放时突然卡住缓冲，是特别影响用户体验的事儿——我之前帮一个短视频平台做播放器优化，就因为没做好缓冲监测，用户投诉卡顿的问题一周内就有30多起。其实用JavaScript监测缓冲状态没那么复杂，核心就是用好buffered这个属性，再结合timeupdate事件实时盯着就行。
buffered
属性其实就像个“已加载时间记录本”，它会返回一个TimeRanges对象，里面存着视频已经缓冲好的时间段。比如视频从0秒开始缓冲，缓冲到20秒暂停了，那buffered里就会有一段0-20秒的记录。你要拿它和当前播放时间对比，就能知道够不够用了。具体操作时，先通过video.buffered.length看看有多少段缓冲（通常是一段），再用video.buffered.end(video.buffered.length
拿到最后一段缓冲的结束时间，比如这个值是25秒，而当前播放到了22秒，那中间就有3秒的缓冲余量，基本够用；要是当前播放到23秒，缓冲结束才24秒，余量只剩1秒，那大概率就要卡了。
实际项目里，我一般会把缓冲阈值设为5-8秒，就是说当缓冲结束时间
的时候，就该提示用户“缓冲中，请稍候”，或者自动暂停播放。你还可以结合progress事件，它会在浏览器加载媒体数据时触发，比timeupdate更及时，适合实时更新缓冲进度条。比如在progress事件回调里，计算已缓冲时长占总时长的百分比，动态更新进度条的灰色缓冲区域，用户一看就知道视频加载到哪儿了，体验会好很多。对了，要是视频是分段加载的（比如HLS格式），buffered可能会有多个时间段，这时候记得遍历所有TimeRanges，取最大的结束时间来判断，避免漏算后面加载的部分。
如何解决不同浏览器对MediaPlayer属性的兼容性差异？
可以通过特性检测（如if (‘pictureInPictureEnabled’ in document)）判断浏览器支持情况，对不支持的属性提供降级方案，例如用自定义按钮替代原生画中画功能。具体兼容性可参考MDN的MediaElement文档（ rel=”nofollow”）。
修改MediaPlayer属性后，UI显示没有同步更新怎么办？
属性修改后需手动同步UI状态，例如修改currentTime后，应同步更新进度条DOM位置；调整volume后，需更新音量滑块的视觉反馈。推荐通过监听timeupdate（进度变化）、volumechange（音量变化）等事件，在事件回调中执行UI更新逻辑。
获取视频时长（duration）时返回NaN，可能的原因是什么？
通常是因为视频元数据未加载完成，需等待loadedmetadata事件触发后再获取。可通过video.addEventListener(‘loadedmetadata’, () => { console.log(video.duration); })确保在元数据加载完成后读取时长。 跨域视频需服务器配置CORS头部，否则可能无法获取完整元数据。
画中画（pictureInPicture）模式的浏览器支持情况如何？
目前Chrome 70+、Edge 79+、Firefox 101+完全支持原生画中画API，Safari 13+通过webkitPictureInPicture前缀支持，IE浏览器不支持该功能。具体兼容性可查询caniuse数据库（ rel=”nofollow”），实际开发中 通过特性检测决定是否启用该功能。
如何通过JavaScript监测视频的缓冲状态？
可使用buffered属性获取已缓冲的时间范围，结合timeupdate事件实时监测。例如通过const bufferedEnd = video.buffered.end(video.buffered.length
