【问题标题】:Youtube API, Muting Video (Iframe)Youtube API,静音视频(Iframe)
【发布时间】:2017-01-04 18:10:57
【问题描述】:

项目 -> http://codepen.io/urketadic/full/YpLgBX/
问题 -> 选项 -> 矩阵模式(静音按钮出现,但按下时不起作用)。
说明 -> 我在 HTML 中有 iframe,没有 src,它是隐藏的 (width,height=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 属性时禁用它并再次将其返回。这不是完全静音,因为它会重置歌曲,但如果我找不到更好的东西,我就继续吧。

【问题讨论】:

  • 在 iframe url 末尾添加&enablejsapi=1

标签: iframe youtube-api mute


【解决方案1】:

基于文档 - Changing the player volume:

  • player.mute():Void
  • 使播放器静音。

  • player.unMute():Void

  • 取消播放器静音。

这些是您在代码中使用的函数。您可能需要仔细检查您的实现以查明您遇到的错误。

您可以阅读许多教程 - How to Control YouTube's Video Player with JavaScriptyoutube 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');
}
});

此实现可能会帮助您控制,只需将文本设置为静音和取消静音。

希望这会有所帮助。

【讨论】:

    【解决方案2】:

    请看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>
    

    应该是这样的。

    【讨论】:

    • 顺便说一句,我们将其放入 HTML 而不是 Javascript 是否有原因?
    • 因为这两行 var firstScriptTag = document.getElementsByTagName('script')[0];和 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);文档中应该有脚本标签。
    猜你喜欢
    • 2012-02-10
    • 2019-07-12
    • 2015-11-17
    • 2020-07-01
    • 1970-01-01
    • 2013-11-21
    • 2021-08-21
    • 2017-04-11
    • 2016-05-12
    相关资源
    最近更新 更多