gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 05:53:22 33 4
gpt4 key购买 nike

我知道要在 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);

最佳答案

引用视频元素的变量称为 videoCurrent,但在点击事件处理程序中,您试图使用一个名为 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>

关于javascript - iOS 自动播放视频的取消静音按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58063577/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com