Unable to play audio when JWPlayer is hidden

孤人 提交于 2020-01-03 03:51:04

问题


I am currently trying to get JWPlayer to play audio files when the user interface is hidden. It works fine for video (plays the sound from the video) but for some reason, when I use the same technique for playing audio files nothing happens when I click my custom play button.

This code plays the sound from the video as expected:

<!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>

This code plays audio fine (but the player is visible):

<!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>

As soon as I add the <div style="display: none;">...</div> the audio no longer plays.

<!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>

Can anyone help? I would like the audio to play when the JWPlayer user interface is hidden.


回答1:


As far as I know the content isn't loaded when the div's display style is set to none.

Try setting something like this

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


来源:https://stackoverflow.com/questions/15070196/unable-to-play-audio-when-jwplayer-is-hidden

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!