音乐播放器冻结页面,所有浏览器
Music Player Freezes Page, all browsers
我在 this test page 上有一个音乐播放器。调用的外部 JavaScript 文件可以通过 head 标签内的页面源查看。他们是
/js/jquery-1.6.1min.js
/js/myplaylist.js
/plugin/ttw-music-player.js
(用于放置复选框的脚本在此文件中找到)
我还有两部分内部 JavaScript 包括:
<script type="text/javascript">
$(document).ready(function() {
var description = '<p align="center">Classic and Southern Rock<br /><i>Check the songs you want, then click the first title checked to begin playing.</p></i><br /><input type="button" onclick="uncheckAll()" value="Clear"/><input class="check" type="button" onclick="checkAll()" value="Select All"/>';
$('#yipPlayer').ttwMusicPlayer(myPlaylist, {
autoPlay: false,
description: description,
jPlayer: {
swfPath: 'plugin/jquery-jplayer'
}
});
});
</script>
clearing/selecting 复选框的这一点:
<script>
function uncheckAll() {
$("input[type='checkbox']:checked").prop("checked", false)
}
function checkAll() {
$("input[type='checkbox']").prop("checked", true)
}
</script>
需要注意的事项:在添加复选框之前,只需单击一个标题,播放器的行为将继续播放整个歌曲列表,除非手动暂停。添加复选框后,播放器会加载所有选中的复选框。必须清除所有框,然后检查歌曲选择。单击第一个选定的标题然后启动播放器。播放器将顺利播放所有选中的歌曲,直到播放完最后一首歌曲;然后它会重新开始。如果您不希望它继续重复播放列表,则必须取消选中这些框。即使只选中了一首歌曲,它也会一遍又一遍地重复那首歌曲。要停止重复,您必须取消选中该框。 (可以通过单击提供的播放器 link 来测试播放器的行为。您可以滑动到歌曲的末尾以避免必须完整地坐下来。)
当所有复选框都未选中时会出现此问题。如果允许玩家一直玩到结束歌曲,页面将冻结。只要歌曲正在播放,就可以暂停,check/uncheck 框等。只有当没有选中任何框并且歌曲完全播放到最后时才会发生冻结。发生这种情况时,页面不再响应任何点击。一个人可能只关闭页面选项卡(在大多数情况下)。
无论浏览器如何,都会发生这种情况(在 Firefox、Chrome、Safari、Opera 中测试)。 Firefox 确实会发出 "Unresponsive Script" 警报,其中包含以下信息:
脚本:http://yipcabbage.com/playerTest/js/jquery-1.6.1.min.js:16(为什么在那个link的末尾出现:16?当然会报404错误。)
我缺乏调试技能JavaScript。由于脚本错误指向jquery-1.6.1.min.js,我通读了this page但不明白checkboxes的属性和属性
我的问题是,由于播放器最初加载时选中了所有复选框,它是否冻结了,因为它最初设置为播放播放器中列出的所有歌曲并且取消选中复选框会破坏该功能(因此它"doesn't know what to do" 当一首歌结束但没有检查任何内容时)?
只有当根本没有选中任何复选框时才会出现问题。
来自 /plugin/ttw-music-player.js:
中的这个函数
function playlistNext() {
$cbs = $(".cb");
var index = current;
do {
index = (index + 1 < myPlaylist.length) ? index + 1 : 0;
} while (!$cbs.eq(index).prop("checked"));
playlistAdvance(index);
}
它进入无限循环,因为没有复选框符合 $cbs.eq(index).prop("checked") 标准。
您可以考虑始终选中一个复选框。或者通过检查是否选中任何框来修复该功能。
我在 this test page 上有一个音乐播放器。调用的外部 JavaScript 文件可以通过 head 标签内的页面源查看。他们是
/js/jquery-1.6.1min.js
/js/myplaylist.js
/plugin/ttw-music-player.js
(用于放置复选框的脚本在此文件中找到)
我还有两部分内部 JavaScript 包括:
<script type="text/javascript">
$(document).ready(function() {
var description = '<p align="center">Classic and Southern Rock<br /><i>Check the songs you want, then click the first title checked to begin playing.</p></i><br /><input type="button" onclick="uncheckAll()" value="Clear"/><input class="check" type="button" onclick="checkAll()" value="Select All"/>';
$('#yipPlayer').ttwMusicPlayer(myPlaylist, {
autoPlay: false,
description: description,
jPlayer: {
swfPath: 'plugin/jquery-jplayer'
}
});
});
</script>
clearing/selecting 复选框的这一点:
<script>
function uncheckAll() {
$("input[type='checkbox']:checked").prop("checked", false)
}
function checkAll() {
$("input[type='checkbox']").prop("checked", true)
}
</script>
需要注意的事项:在添加复选框之前,只需单击一个标题,播放器的行为将继续播放整个歌曲列表,除非手动暂停。添加复选框后,播放器会加载所有选中的复选框。必须清除所有框,然后检查歌曲选择。单击第一个选定的标题然后启动播放器。播放器将顺利播放所有选中的歌曲,直到播放完最后一首歌曲;然后它会重新开始。如果您不希望它继续重复播放列表,则必须取消选中这些框。即使只选中了一首歌曲,它也会一遍又一遍地重复那首歌曲。要停止重复,您必须取消选中该框。 (可以通过单击提供的播放器 link 来测试播放器的行为。您可以滑动到歌曲的末尾以避免必须完整地坐下来。)
当所有复选框都未选中时会出现此问题。如果允许玩家一直玩到结束歌曲,页面将冻结。只要歌曲正在播放,就可以暂停,check/uncheck 框等。只有当没有选中任何框并且歌曲完全播放到最后时才会发生冻结。发生这种情况时,页面不再响应任何点击。一个人可能只关闭页面选项卡(在大多数情况下)。
无论浏览器如何,都会发生这种情况(在 Firefox、Chrome、Safari、Opera 中测试)。 Firefox 确实会发出 "Unresponsive Script" 警报,其中包含以下信息:
脚本:http://yipcabbage.com/playerTest/js/jquery-1.6.1.min.js:16(为什么在那个link的末尾出现:16?当然会报404错误。)
我缺乏调试技能JavaScript。由于脚本错误指向jquery-1.6.1.min.js,我通读了this page但不明白checkboxes的属性和属性
我的问题是,由于播放器最初加载时选中了所有复选框,它是否冻结了,因为它最初设置为播放播放器中列出的所有歌曲并且取消选中复选框会破坏该功能(因此它"doesn't know what to do" 当一首歌结束但没有检查任何内容时)?
只有当根本没有选中任何复选框时才会出现问题。
来自 /plugin/ttw-music-player.js:
中的这个函数function playlistNext() {
$cbs = $(".cb");
var index = current;
do {
index = (index + 1 < myPlaylist.length) ? index + 1 : 0;
} while (!$cbs.eq(index).prop("checked"));
playlistAdvance(index);
}
它进入无限循环,因为没有复选框符合 $cbs.eq(index).prop("checked") 标准。
您可以考虑始终选中一个复选框。或者通过检查是否选中任何框来修复该功能。