Question

我正在尝试让JWPlayer在隐藏用户界面时播放音频文件。它适用于视频（播放视频中的声音），但出于某种原因，当我使用相同的技术播放音频文件时，单击我的自定义播放按钮时没有任何反应。

此代码按预期播放视频中的声音：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
</head>
<body>
    <div style="display: none;">
        <div id="player"></div>
    </div>
    <input onclick="jwplayer('player').play();" type="button" value="Play the hidden video!!!" />
    <script type="text/javascript">

        jwplayer("player").setup({
            levels: [
            { file: "VideoTest001.mp4" },
            { file: "VideoTest001.ogv" },
            { file: "VideoTest001.webm" }
            ]
        });

    </script>
</body>
</html>

此代码可播放音频（但播放器可见）：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
</head>
<body>
    <div id="player"></div>
    <input onclick="jwplayer('player').play();" type="button" value="Play the hidden audio!!!" />
    <script type="text/javascript">

        jwplayer("player").setup({
            levels: [
                { file: "AudioTest.mp3" },
                { file: "AudioTest.wav" }
            ]
        });

    </script>
</body>
</html>

只要我添加<div style="display: none;">...</div>，音频就不再播放了。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
</head>
<body>
    <div style="display: none;">
        <div id="player"></div>
    </div>
    <input onclick="jwplayer('player').play();" type="button" value="Play the hidden audio!!!" />
    <script type="text/javascript">

        jwplayer("player").setup({
            levels: [
                { file: "AudioTest.mp3" },
                { file: "AudioTest.wav" }
            ]
        });

    </script>
</body>
</html>

有人可以帮忙吗？我想在隐藏JWPlayer用户界面时播放音频。

Answer 1

据我所知，当div的显示样式设置为none时，内容未加载。

尝试设置类似这样的内容

<div style="width: 1px; height: 1px; position: absolute; top: -9999px; left: -9999px;">
    <div id="player"></div>
</div>

隐藏JWPlayer时无法播放音频

1 个答案: