用户滚动特定高度时停止音量

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用户滚动特定高度时停止音量相关的知识,希望对你有一定的参考价值。

我试图制作一个脚本来淡化html5视频的音量。

所以我找到了一个代码来实现它,我做了一些改变以满足我的需求,得到这样的东西。

	var videoMute = $('#myVideo').get(0);
	var heightVideo = parseInt( $("#contents-main").css("marginTop") );
	
	$(document).scroll(function() {
		videoMute.volume = 1 - $(window).scrollTop() / heightVideo;
	});

因此,当用户在内容和视频之间滚动一些margintop时,我试图淡化视频的音量,我尝试计算窗口之间的视频音量滚动顶部和我从内容主要获得的边距。

问题是,当我滚动边距并输入#content-main时,我收到此错误。

    Uncaught DOMException: Failed to set the volume property on HTMLMediaElement: The volume provided -X number is outside the range 0, 1.

也许你可以帮助我解决这个问题,提出一些关于如何在音量减去cero时结束函数的建议,或者可能改变我制定数学公式以获取视频音量的方式。

提前致谢。

答案

问题是这必须介于0和1之间。您最有可能获得负数。在调试器中创建一个断点,看看这个表达式给你带来了什么。还有什么scrollTopheightVideo变种。

1 - $(window).scrollTop() / heightVideo;
另一答案

您可以尝试:它将检查音量是否在0和1之间,如果不是,那么当且仅当1 - $(窗口).scrollTop()/ heightVideo是正确的方式时,音量将为0体积

var videoMute = $('#myVideo').get(0);
var heightVideo = parseInt( $("#contents-main").css("marginTop") );
	
$(document).scroll(function() {
  var volume = 1 - $(window).scrollTop() / heightVideo;
	videoMute.volume = (volume > 1 || volume < 0) ? 0 : volume;
});

以上是关于用户滚动特定高度时停止音量的主要内容,如果未能解决你的问题,请参考以下文章

滚动到滚动视图/滚动视图中的特定文本字段 当键盘在屏幕上时停止滚动

自动滚动时 UIScrollView 触摸不起作用

溢出:滚动停止悬停状态激活

向其内容添加宽度和高度约束后,UIScrollView 滚动停止工作

单击音量键时禁用声音

输入文本时自动扩展的 Flutter 文本字段,然后在达到特定高度时开始滚动文本