无法通过 attributeChangedCallback 监控原生 video 标签属性变化，因其仅适用于自定义元素；可行方案包括：MutationObserver 监听属性变更、封装 extends 'video' 的自定义元素、或监听 loadedmetadata/volumechange 等事件并读取 IDL 属性。
AttributeChangedCallback 这个接口，它属于已废弃的 Web Components v0 规范（Polymer 1.x / 早期 Custom Elements），且在现代浏览器中**完全不可用**。当前标准（Custom Elements v1）使用的是 attributeChangedCallback（小写 a），但它仅在自定义元素（class extends HTMLElement）中生效，**不能直接用于原生
因此，**无法通过 attributeChangedCallback 监控原生 标签的属性变化**——这是技术上不可行的限制，不是实现方式问题。
不过，你可以通过以下**实际可行的方式**达成“监控 video 元素多媒体属性变化”的目标：
✅ 替代方案一：监听属性变更（手动轮询 + MutationObserver）
原生 不触发 attributeChangedCallback，但 DOM 属性（如 src、controls、muted、autoplay）的修改会反映在 HTML 特性（attribute）上。可用 MutationObserver 监听其 attributes 变化：
const video = document.querySelector('video');
const observer = new MutationObserver((mutations) => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes') {
console.log('Video attribute changed:', mutation.attributeName, '→', video.getAttribute(mutation.attributeName));
// 例如：处理 src 更新、静音切换等
if (mutation.attributeName === 'src') {
console.log('New video source:', video.src);
}
}
});
});
// 观察所有 attribute 变化（也可指定 attributeFilter: ['src', 'muted', 'autoplay']）
observer.observe(video, { attributes: true });
✅ 替代方案二：封装自定义 video 元素（Custom Element v1）
若需类 attributeChangedCallback 的语义，可创建一个继承 HTMLVideoElement 的自定义标签（需使用 extends 'video'）：
class MonitoredVideo extends HTMLVideoElement {
static get observedAttributes() {
return ['src', 'muted', 'autoplay', 'loop', 'controls'];
}
attributeChangedCallback(name, oldValue, newValue) {
console.log(`Video ${name} changed from "${oldValue}" to "${newValue}"`);
// 注意：部分属性（如 muted）是 IDL 属性，变更时不一定同步触发 attributeChangedCallback
// 建议结合 property setter 或事件（如 loadedmetadata）做补充判断
if (name === 'src' && newValue && newValue !== oldValue) {
this.addEventListener('loadedmetadata', () => {
console.log('New media metadata loaded');
}, { once: true });
}
}
}
// 定义为内置扩展元素（必须加 { extends: 'video' }）
customElements.define('monitored-video', MonitoredVideo, { extends: 'video' });
使用方式：
✅ 替代方案三：监听关键事件 + 同步检查属性状态
很多“属性变化”的实际影响体现在行为或状态上，更可靠的做法是监听相关事件并主动读取当前属性/IDL 属性值：
-
src 变更 → 监听
loadstart或loadedmetadata，再读video.src -
muted 切换 → 监听
volumechange，检查video.muted -
播放/暂停 → 监听
play/pause，读video.paused -
全屏变化 → 监听
fullscreenchange，查document.fullscreenElement
⚠️ 关键提醒
- HTML 特性（
getAttribute('muted')）和 IDL 属性（video.muted）行为不同：布尔特性存在即为 true，但移除特性后 IDL 属性仍可能为true（如用户点过静音按钮） -
autoplay、controls等特性变更会立即影响 UI，但attributeChangedCallback仅响应setAttribute/removeAttribute，不响应 JS 赋值（如video.autoplay = true） - 现代开发中，优先使用事件驱动 + 显式状态检查，而非依赖 attribute 变更回调
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
