YouTube iFrame API在JavaFX WebView中无法正常运行?

时间:2017-11-12 08:30:34

标签: api iframe javafx webview youtube

所以最近我一直致力于制作一个可以播放用户制作的播放列表的音频播放器(mp3文件,wav文件等),但也可以播放YouTube播放列表。为了播放YouTube视频,我将JavaFX的WebView与Google的YouTube iFrame API结合使用。 为此,我使用以下代码;

    @Override
    public void loadList(String list) 
    {
        html = "<!DOCTYPE html>\n" +
        "<html>\n" +
        "  <body>\n" +
        "<iframe id=\"player\" width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/videoseries?list=PL7aXwAD1wk5kdkuQOFBHY63R9Bhki7rCg&enablejsapi=1\" frameborder=\"0\" gesture=\"media\" allowfullscreen></iframe>\n" +
        "\n" +
        "<script type=\"text/javascript\">\n" +
        "  var tag = document.createElement('script');\n" +
        "  tag.id = 'iframe-demo';\n" +
        "  tag.src = 'https://www.youtube.com/iframe_api';\n" +
        "  var firstScriptTag = document.getElementsByTagName('script')[0];\n" +
        "  var volume = 100;\n" +
        "  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n" +
        "\n" +
        "  var player;\n" +
        "  function onYouTubeIframeAPIReady() {\n" +
        "    player = new YT.Player('player', {\n" +
        "        events: {\n" +
        "          'onReady': onPlayerReady,\n" +
        "          'onError' : handleError,\n" +
        "          'onStateChange' : stateChange,\n" +
        "          'onApiChange' : stateChange\n" +
        "        }\n" +
        "    });\n" +
        "  }\n" +
        "  function onPlayerReady(event) {\n" +
        "     event.target.playVideo();\n" +
        "      //event.target.nextVideo();\n" +
        "  }\n" +
        "    \n" +
        "    function handleError(event)\n" +
        "    {\n" +
        "        console.log(event);\n" +
        "        player.nextVideo();\n" +
        "    }\n" +
        "    \n" +
        "    function setVolume(vol)\n" +
        "    {\n" +
        "        volume = vol;\n" +
        "        player.setVolume(vol);\n" +
        "    }\n" +
        "    \n" +
        "    function stateChange(event)\n" +
        "    {\n" +
        "       // player.setVolume(volume + 1);\n" +
        "       // player.setVolume(volume - 1);\n" +
        "      //  player.setVolume(volume);\n" +
        "    }\n" +
        "</script>\n" +
        "  </body>\n" +
        "</html>";

        jfxPanel = new JFXPanel();
        Platform.runLater ( new Runnable () {
            @Override
            public void run () {
                player = new WebView();

                player.getEngine().setJavaScriptEnabled(true);
                player.getEngine().loadContent(html);
                jfxPanel.setScene(new Scene(player));
                JFrame f = new JFrame();
                f.add(jfxPanel);
                f.setSize(1280,720);
                f.setVisible(true);

            }
        } );
        GraphicalInterface.uptodate = false;
    }

我遇到的问题是: 一旦我使用了API&#39; player.setVolume(vol)&#39;功能,它正确地改变了当前正在播放的视频的音量。加载新视频时,视频播放器仍显示音量与之前设置的相同,但输出的音量太高; 第一个视频,降低音量; enter image description here

第二个视频,volumelider降低,音量本身不是; enter image description here

使用JavaFX的WebView时,我只有这个问题。当我将HTML代码粘贴到.html文件中并以这种方式运行时,音频被正确降低(而不仅仅是音频滑块)。

有谁知道为什么会发生这种情况以及如何解决这个问题?是否与WebView的设置有关?

注意: 在JavaScript中我已经注释掉了一小段代码。此代码是一个小的临时解决方法,重新设置&#34;加载新视频时应将音频转换到的位置。但这个解决方案并不理想。

0 个答案:

没有答案