vue-video-player怎么实现有声播放？

Question

已经加过muted属性了但是是静音播放用户体验不太好

Answer 1

视频播放默认就是有声音的。
muted的意思是静音，不要设置这个属性，或者设置为false就行。

Answer 2

在Chrome 71 中启动了自动播放策略

• 始终允许静音自动播放。

• 在以下情况下允许自动播放声音：

  • 用户与域进行了交互（单击、点击等）。
  • 在桌面上，用户的媒体参与指数阈值已被超过，这意味着用户之前曾播放过有声视频。
  • 用户已将该站点添加到其移动设备的主屏幕或在桌面设备上安装了 PWA。
• 顶级框架可以将自动播放权限委托给它们的 iframe 以允许自动播放声音。

<video src="./156.mp4" id="video"></video>
<script>
  document.onclick = e => { // 只要点击过就能播放
    document.getElementById('video').play()
  }
  document.onmousemove = e => { // 不会生效
    document.getElementById('video').play()
  }
</script>

授权 iframe

<iframe src="myvideo.html" allow="autoplay">

还有一种情况就是用户经常访问你的网站，就能实现自动播放（有声音），否则只能静音播放，怎么算经常访问这得看浏览器。

var promise = document.querySelector('video').play();

if (promise !== undefined) {
  promise.then(_ => {
    // 成功播放
  }).catch(error => {
    // 自动播放被阻止.
    // 显示一个播放按钮让用户点击.
  });
}