隐藏JWPlayer后无法播放音频 [英] Unable to play audio when JWPlayer is hidden
问题描述
我当前正在尝试让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用户界面时播放音频.
据我所知，当div的显示样式设置为无时，不会加载内容.
尝试设置类似的内容
<div style="width: 1px; height: 1px; position: absolute; top: -9999px; left: -9999px;">
<div id="player"></div>
</div>
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.
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>
这篇关于隐藏JWPlayer后无法播放音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
