Why does video.js interfere with html5 video '

问题:

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 calls a function that does the storing and retrieving of the volume levels.

If I use

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

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)"

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.

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?

回答1:

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);

});

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