Question

我知道要在iOS中使用autoplay标签，出于“安全原因”也必须使用mute标签。我正在使用类似于autoplay的东西，即从我的JavaScript代码中调用video.play()。为此，我还必须包含mute标记。我希望用户能够启用声音。理想情况下，我希望通过我自己的自定义按钮进行操作。但是，我似乎无法使它正常工作。有人做过吗？

基本视频HTML

<video width="100%" id='test' class='vidInit' muted playsinline></video>

从JS播放

videoCurrent = document.getElementById('test');
// ...
videoCurrent.play();

取消静音按钮-不起作用：（

let unmute = document.createElement('img');
unmute.style = 'background-color: blue; position: absolute; display: block; left: 100px; top: 100px; width: 100px; height: 100px;';
unmute.onclick = function() {
    video.muted = false;
    console.log('UNMUTE');
}
navbar.appendChild(unmute);

Answer 1

引用视频元素的变量称为videoCurrent，但是在click事件处理程序中，您尝试使用一个简单的变量video，该变量未定义。这是一个工作示例，显示当您使用正确的引用时它确实可以工作。我也将进行静音的行更改为

videoCurrent.muted = !videoCurrent.muted;

为了能够进行演示，可以切换静音/取消静音状态。

在记录"UNMUTE"之前，您应该已经在控制台中看到一条错误消息，说明了该问题。

var videoCurrent = document.getElementById('test');
var navbar = document.querySelector('nav');
videoCurrent.play();

let unmute = document.createElement('img');
unmute.style = 'background-color: blue; position: absolute; display: block; left: 100px; top: 100px; width: 100px; height: 100px;';
unmute.onclick = function() {
  videoCurrent.muted = !videoCurrent.muted;
  console.log('UNMUTE');
}
navbar.appendChild(unmute);

<nav></nav>
<video width="100%" id='test' class='vidInit' src='http://clips.vorwaerts-gmbh.de/VfE_html5.mp4' muted playsinline></video>

iOS自动播放视频的取消静音按钮

1 个答案: