项目 - > http://codepen.io/urketadic/full/YpLgBX/
问题 - > 选项 - >矩阵模式(静音按钮出现,但按下时不起作用)。
说明 - > 我在HTML中没有src的iframe,其隐藏(宽度,高度= 0)。
但是,如果启用了矩阵模式,则此iframe将使用URL:
$('#iframe').attr("src","https://www.youtube.com/embed/videoseries?list=PLikZa7q0vpioApkXpyYxsrsng-nIsXBhv&autoplay=1&loop=1");
我还添加了静音按钮,按下时可以更改为取消静音按钮,也可以在上面的播放列表中静音播放视频:
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytplayer', {
height: '0',
width: '0',
playerVars: {
listType:'playlist',
list: 'https://www.youtube.com/embed/videoseries?list=PLikZa7q0vpioApkXpyYxsrsng-nIsXBhv' } }
)};
$('#unmute').on('click', function() {
$("#unmute").hide();
$("#mute").show();
player.mute();
});
$('#mute').on('click', function() {
$("#mute").hide();
$("#unmute").show();
player.unmute();
});
静音按钮确实更改为取消静音按钮,但播放列表中的视频不会更改。
有谁知道我在这里做错了什么?
编辑:我目前拥有的是,我只是在点击时禁用src attr并再次将其还原。这并不是完全无声的,因为它重置了这首歌,但如果我找不到更好的东西,那就去吧。
答案 0 :(得分:1)
基于文档 - Changing the player volume:
- 的
player.mute():Void
强>使播放器静音。
<强>
player.unMute():Void
强>- 取消播放器静音。
这些是您在代码中使用的功能。您可能需要仔细检查您的实现,以查明您遇到的错误。
您可以阅读许多教程,例如 - How to Control YouTube's Video Player with JavaScript和youtube iframe api - easily create and interact with embedded youtube videos代码实现:
$('#mute-toggle').on('click', function() {
var mute_toggle = $(this);
if(player.isMuted()){
player.unMute();
mute_toggle.text('volume_up');
}
else{
player.mute();
mute_toggle.text('volume_off');
}
});
此实现可以帮助您控制,只需将文本设置为静音和取消静音。
希望这有帮助。
答案 1 :(得分:0)
请查看http://codepen.io/anon/pen/oBgweY
请注意HTML部分中的此代码:
<div id="player"></div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '0',
width: '0',
playerVars: {
listType:'playlist',
list: 'PLikZa7q0vpioApkXpyYxsrsng-nIsXBhv' }
});
}
</script>
应该是它。