扩展音频/HTMLMediaElement javascript 对象

Posted

技术标签:

【中文标题】扩展音频/HTMLMediaElement javascript 对象【英文标题】:Extending Audio / HTMLMediaElement javascript object 【发布时间】:2012-07-15 14:45:00 【问题描述】:

我需要扩展 Audio 对象以提供停止功能。通常这段代码可以工作:

Audio.prototype.stop = function() 
    this.pause();
    this.currentTime = 0;

但是,我需要在 Chrome 扩展程序的内容脚本中执行此操作,并且由于上下文是分开的,因此更改不会传播到其他上下文。

我曾尝试使用 this unsafeWindow hack 尝试突破隔离环境,但没有成功,并尝试使用 Object.create 并设置 constructor 属性。

【问题讨论】:

内容脚本永远无法访问页面的全局window 对象。问题与Building a Chrome Extension - Inject code in a page using a Content script 重复。旁注,我会使用if (!Audio.prototype.stop) ...;,以避免在实现stop 时发生冲突。 【参考方案1】:

内容脚本有一个独立的执行环境,但它与页面共享 DOM。你可以通过在DOM中添加<script>标签,在页面的实际执行环境中运行脚本:

var s = document.createElement("script");
s.innerText = "Audio.prototype.stop = function()  this.pause(); this.currentTime = 0; ";
document.documentElement.appendChild(s);

我相信这段代码会在两个执行环境中运行脚本(或者至少应该在页面环境中运行)。

请注意,此解决方案只能在资源加载期间或之后运行脚本,而不是在 DOM 完成后立即运行,因为它需要浏览器处理添加到页面的新脚本资源。对于您当前的需求,这应该不是问题。

【讨论】:

以上是关于扩展音频/HTMLMediaElement javascript 对象的主要内容,如果未能解决你的问题,请参考以下文章

HTML5 音频元素 - 搜索滑块 - 无法在“HTMLMediaElement”上设置“currentTime”属性:提供的双精度值是非有限的

故意使 HTMLMediaElement 或 HTMLVideoElement 缓冲区无效或清除?

Android:“无法在'HTMLMediaElement'上执行'play':API只能由用户手势启动[重复]

Chrome,firefox解除阻止视频自动播放

HTMLMediaElement 的非线性体积

如何在 canplay 事件中设置 HTMLMediaElement 的 .currentTime,调用 play 并避免调度 pause 事件?