YouTube iframe Embed can't control audio on iPad

问题

I have been playing around with the YouTube iframe API and have created a basic set of player controls for the YouTube player using Flash CC HTML5 canvas. The controls consist of a play/pause button, a video bar with drag-able play head and visual indication of buffering, and a volume controller. Everything works well in Chrome on my desktop.

However when I test the player on iPad everything works fine except for the volume controller. The slider moves perfectly fine, but causes no change in volume.

I looked around online and wasn't able to find anything specific to the issue of volume being uncontrollable on iPad, also since there is no dev console on iPad I can't really poke around inside to figure out what is going on.

If anyone has any experience with this issue or any general insight into what might be going on it would be much appreciated.

Here is a JSFiddle https://jsfiddle.net/y3dL9jsw/1/ with the project in it.

Here is the code relevant to volume control:

    //Volume Control
mainStage.mcplayer.mcvolumecontrol.volIcon.on("mousedown", function(evt){
    if(mainStage.mcplayer.mcvolumecontrol.currentFrame == 0){
        mainStage.mcplayer.mcvolumecontrol.gotoAndStop(1);
    }else{
        mainStage.mcplayer.mcvolumecontrol.gotoAndStop(0);
    }
});
//Mouse Down Pick-up Video Playhead, Change Cursor to pointy finger
mainStage.mcplayer.mcvolumecontrol.mcvolhead.on("mousedown", function(evt){
    isVolGrabbed = true;
    document.body.style.cursor='pointer';
});
//Mousemove Move Voulme Playhead
mainStage.mcplayer.mcvolumecontrol.mcvolhead.on("pressmove", function(evt){
    if(isVolGrabbed == true){
        evt.nativeEvent.preventDefault();//stop browser default actions from happening (Selecting text, etc)
        this.x = evt.stageX - mainStage.mcplayer.x - mainStage.mcplayer.mcvolumecontrol.x;//make playhead follow mouse 
        //constrain playhead x coords to the videobar
        if(this.x < 0 + mainStage.mcplayer.mcvolumecontrol.mcvolslider.x){this.x = mainStage.mcplayer.mcvolumecontrol.mcvolslider.x;}
        if(this.x > volbarLength + mainStage.mcplayer.mcvolumecontrol.mcvolslider.x){this.x = volbarLength + mainStage.mcplayer.mcvolumecontrol.mcvolslider.x;}
        //if the mouse gets too far from the bar along the y axis, drop the head change back the cursor
        //this is important because the Youtube player breaks the mouse events if you mouse over it
        if((evt.stageY - mainStage.mcplayer.y) < (-1 * playheadConstrain) || (evt.stageY - mainStage.mcplayer.y) > playheadConstrain){
            document.body.style.cursor='auto';
            isVolGrabbed = false;
            }
    }
});

mainStage.mcplayer.mcvolumecontrol.mcvolhead.on("pressup", function(evt){
    document.body.style.cursor='auto';
    volFraction = (mainStage.mcplayer.mcvolumecontrol.mcvolhead.x - mainStage.mcplayer.mcvolumecontrol.mcvolslider.x) / (volbarLength);
    playeryt.setVolume(volFraction * 100);
    console.log("vol Drop" + volFraction);
    isVolGrabbed = false;
});

回答1:

According to the Safari Docs, the volume property is read-only and can't be set.

On iOS devices, the audio level is always under the user’s physical control. The volume property is not settable in JavaScript. Reading the volume property always returns 1.

You cannot programmatically set the volume of the video.

来源：https://stackoverflow.com/questions/31147753/youtube-iframe-embed-cant-control-audio-on-ipad