YouTube iframe Embed 无法控制 iPad 上的音频 [英] YouTube iframe Embed can't control audio on iPad

问题描述

我一直在使用 YouTube iframe API，并使用 Flash CC HTML5 画布为 YouTube 播放器创建了一组基本的播放器控件.这些控件包括一个播放/暂停按钮、一个带有可拖动播放头和视觉缓冲指示的视频栏，以及一个音量控制器.在我桌面上的 Chrome 中一切正常.

但是，当我在 iPad 上测试播放器时，除了音量控制器外，一切正常.滑块移动得很好，但不会引起音量变化.

我在网上环顾四周，无法找到任何特定于 iPad 上音量无法控制的问题，而且由于 iPad 上没有开发控制台，我无法真正深入了解发生了什么.

如果有人对此问题有任何经验或对可能发生的事情有任何大致了解，我们将不胜感激.

这是一个带有项目的 JSFiddle https://jsfiddle.net/y3dL9jsw/1/在里面.

这是与音量控制相关的代码:

//音量控制mainStage.mcplayer.mcvolumecontrol.volIcon.on("mousedown", function(evt){如果(mainStage.mcplayer.mcvolumecontrol.currentFrame == 0){mainStage.mcplayer.mcvolumecontrol.gotoAndStop(1);}别的{mainStage.mcplayer.mcvolumecontrol.gotoAndStop(0);}});//鼠标向下拾取视频播放头，将光标更改为尖指mainStage.mcplayer.mcvolumecontrol.mcvolhead.on("mousedown", function(evt){isVolGrabbed = true;document.body.style.cursor='pointer';});//Mousemove 移动音量播放头mainStage.mcplayer.mcvolumecontrol.mcvolhead.on("pressmove", function(evt){如果(isVolGrabbed == 真){evt.nativeEvent.preventDefault();//停止浏览器默认动作的发生(选择文本等)this.x = evt.stageX - mainStage.mcplayer.x - mainStage.mcplayer.mcvolumecontrol.x;//让播放头跟随鼠标//将播放头 x 坐标限制到视频栏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;}//如果鼠标沿 y 轴距离条形图太远，则将头部移回光标//这很重要，因为如果您将鼠标悬停在 Youtube 播放器上，它会中断鼠标事件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;});

解决方案

根据 Safari 文档，音量属性是只读的，无法设置.><块引用>

在 iOS 设备上，音频电平始终低于用户的身体控制.音量属性在 JavaScript 中不可设置.读volume 属性总是返回 1.

您无法以编程方式设置视频的音量.

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

解决方案

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.

这篇关于YouTube iframe Embed 无法控制 iPad 上的音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！