问题
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