如果 <video> 正在播放，请停止 <audio>

Posted 2023-02-25

【中文标题】如果 <video> 正在播放，请停止 <audio>

【英文标题】：If <video> is playing stop <audio>

【发布时间】：2011-05-27 13:22:12

【问题描述】：

在网页上，我使用几个音频标签来播放鼠标声音，并使用一个视频标签来播放视频。

现在，在播放视频时，应该停止并禁用音频。音频是这样触发的：

$(this).mouseover(function() 
    $('audio#' + $(this).attr('title') + '_sound').trigger('play');
);

现在应该添加这样的东西，我已经尝试了一些都不起作用的东西：

$(this).mouseover(function() 
    if($('#video') is NOT playing) 
        $('audio#' + $(this).attr('title') + '_sound').trigger('play');
    
);

以前有人做过类似的东西吗？

任何帮助表示赞赏:-)

谢谢！

【参考方案1】：

html5 有一个 paused 属性。

var v = document.getElementsByTagName("video")[0];

$(this).mouseover(function() 
    if(v.paused)  // checks to see if video is paused
       $('audio#' + $(this).attr('title') + '_sound').trigger('play');
    
);

【讨论】：

更多信息请见documentation on paused。

另外，请注意，并非所有浏览器都支持paused属性。

@orftz 感谢您发布文档。你知道有什么好的链接可以提供较少的paused 技术解释吗？当我发布这篇文章时，我正在寻找一个链接来包含它，它不像 W3 文档那么冗长。

我发现的关于paused 的唯一另一件事是this。根本没有关于这个的文档。

【参考方案2】：

您应该注册一个事件监听器，以便在视频标签的暂停信号被断言时被调用。

var v = document.getElementsByTagName("video")[0];
v.addEventListener("pause", function()  audio.trigger("play"); , true);

【讨论】：

这是正确的 js 方式，考虑到 javascript 引入了事件驱动编程

【参考方案3】：

var video = document.getElementById("myVideo");
var music = document.getElementById("myMusic");
var noOverlap = setInterval(
if(myVideo.paused == false)
    myMusic.pause();

, 1000);

这将检查两者是否每秒重叠，默认情况下，播放视频并暂停音乐。