在 Web 开发中，我们常常需要使用音视频功能来丰富用户体验。然而，有时候在调用 HTMLMediaElement.play() 方法时，浏览器会抛出一个 play() 请求是由一个叫（） 的错误，导致音视频无法正常播放。
这个错误通常是由于浏览器的自动播放策略所引起的。为了保护用户隐私和提高性能，现代浏览器普遍都采用了自动播放限制，只有当用户与页面进行交互时才能执行自动播放操作。
那么如何规避这个错误呢？我们可以采取以下几种方法：
1. 用户操作后再自动播放
最简单的方法就是等待用户与页面进行交互后再执行自动播放操作。例如，在用户点击某个按钮或链接时，将音视频元素的 play() 方法调用放入回调函数中，以此来启动播放：
const playButton = document.getElementById('play-button');
const video = document.getElementById('video-element');
playButton.addEventListener('click', () => {
video.play();
});这种方法能够确保在用户同意之后才自动播放音视频，从而避免了浏览器的自动播放限制。
2. 使用 muted 属性实现自动播放
另外一种方法是将音视频元素的 muted 属性设置为 true，这样就可以在浏览器允许的情况下自动播放：
<video muted autoplay> <source src="video.mp4" type="video/mp4"> </video>
当然，如果需要有声音的自动播放，我们还需要在用户与页面进行交互后，再手动移除 muted 属性。
3. 使用 Promise 处理自动播放
最后一种方法则是利用 Promise 对象处理自动播放。我们可以先调用 play() 方法，并通过 Promise 对象来监听播放状态。如果播放成功，那么我们就可以执行相应的逻辑；否则，我们可以等待用户与页面进行交互后再尝试播放。
-- -------------------- ---- -------
----- ----- - -----------------------------------------
----- ----------- - -------------
-- ------------ --- ---------- -
------------------- -- -
-- ------------
----------- -- -
-- --------------------
---------------------------------- -- -- -
-------------
---
---
-通过这种方式，我们可以更加灵活地控制音视频的播放行为，并且避免了错误中断的问题。
综上所述，我们可以使用多种方法来规避“play() 请求是由一个叫（）”的错误。无论采用何种方案，我们都需要保证用户体验的良好，并遵守浏览器的自动播放限制。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11697
