1

我目前正在尝试让 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 用户界面时播放音频。

4

1 回答 1

4

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

尝试设置这样的东西

<div style="width: 1px; height: 1px; position: absolute; top: -9999px; left: -9999px;">
    <div id="player"></div>
</div>
于 2013-02-25T16:05:04.657 回答