为什么 video.js 会干扰 html5 视频“静音" [英] Why does video.js interfere with html5 video 'muted'

问题描述

我在页面上使用以下视频标签，以便在用户更改音量时记住它以供后续视频观看 -

I am using the following video tag on a page so that when the user changes volume it is remembered for subsequent video viewings -

<video class="video-js vjs-default-skin" controls preload="none" id="video1" data-setup="{}" onvolumechange="setVolume(this.volume,this.muted)">

setVolume 调用一个函数来存储和检索音量.

setVolume calls a function that does the storing and retrieving of the volume levels.

如果我使用

data-setup="{}" onvolumechange="setVolume(this.volume)"

音量级别会被记住，除非按下静音按钮.我可以省略data-setup="{}"，它的工作原理是一样的

the volume levels are remembered except for if the mute button is pressed. I can omit data-setup="{}" and it will work the same

我遇到的问题是当我使用以下内容

The problem I am having is when I use the following

data-setup="{}" onvolumechange="setVolume(this.volume,this.muted)"

记住音量但不记住静音，实际上在页面刷新后音量设置为 100%.但是如果我省略data-setup="{}"，那么静音就会被记住并且工作正常.

volume is remembered but muting is not remembered, in fact after a page refresh the volume is set to 100%. But if I omit data-setup="{}" then muting is remembered and works fine.

很明显，data-setup="{}" 是导致此问题的原因.那么为什么要这样做，video.js 中的哪些内容存在冲突，我该如何解决?

It seems obvious that the data-setup="{}" is what is causing this problem. So why is it doing this, what in video.js is conflicting and how do I work around it?

推荐答案

发现问题.我的脚本需要首先挂接到 video.js 就绪函数中，就像这样

Found the problem. My script needed to be hooked into the video.js ready function first, like so

videojs("video1").ready(function(){
  var myPlayer = this;
  getVolume(myPlayer);

});

然后在 setVolume 函数中你需要使用 myPlayer.muted(true); 而不是普通的 html5 视频 API 方式 myPlayer.muted = true;

then in a setVolume function you need to use myPlayer.muted(true); instead of the normal html5 video API way myPlayer.muted = true;

这篇关于为什么 video.js 会干扰 html5 视频“静音"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！