个人中心
gpt4 book ai didi

javascript - 覆盖 playerVars 控件 :attrib dynamically for videos in youtube API

转载 作者：行者123 更新时间：2023-11-29 10:07:51 30 4
gpt4 key购买 nike

我有以下用于 youtube API 的 JS 代码 -

<html>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var ScriptTag = document.getElementsByTagName('script')[0];
ScriptTag.parentNode.insertBefore(tag, ScriptTag);

var player; 
      function onYouTubeIframeAPIReady() {                      
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId : 'YtF6p_w-cSc',                 
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }      
        });
      }       

       function onPlayerReady(event) {                                        
        event.target.playVideo();
      }

      var done = false;
      function onPlayerStateChange(event) {   
        if (event.data == YT.PlayerState.ENDED && !done) {   
            player.loadVideoById ('4MJRS-cLozU');
        }       
      }

</script>
<body>
  <div id="player"></div>  
 </body>
</html>

这里是 jsfiddle

描述-

在上面的代码中，它们是一个接一个播放的 2 个视频 [IE。最初是 YtF6p_w-cSc，然后是 4MJRS-cLozU]。现在，当第一个视频 loaded/played 我想隐藏控件[IE。 PlayerVar{control : 0}] 以下黄色高亮部分应该被删除。 enter image description here

而对于另一个视频，我想要它回来 [即控制:1]。

简单来说，我想为第一个视频隐藏控制，并希望为第二个视频恢复它。

如何实现。请帮助。!!

最佳答案

将 controls=0 添加到 url 的末尾。

要重新启用控件，请使用 controls=1 或 2。

在您的配置中添加与其他属性和事件相同的区域:

      playerVars: {
        controls: '0'
      },

要重新启用控件，请使用:

      playerVars: {
        controls: '1' //or 2 
      },

由于严格的沙箱，代码段无法完全发挥作用。尝试 PLUNKER

手动制作您的 iframe 并更改 url。不要尝试更改 playerVars Youtube 允许在 playerVars 中动态更改的唯一选项是字幕。

片段

<iframe src="http://youtube.com/embed/ir2qcPwZFdQ?controls=0&enablejsapi=1&iv_load_policy=3&rel=0" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>

<iframe src="http://youtube.com/embed/ir2qcPwZFdQ?color=white&enablejsapi=1&iv_load_policy=3&rel=0" width="560" height="345" frameborder="0" allowfullscreen=""></iframe>

<div id="player"></div>
<script>
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api?controls=0";
  var ScriptTag = document.getElementsByTagName('script')[0];
  ScriptTag.parentNode.insertBefore(tag, ScriptTag);

  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'YtF6p_w-cSc',
      playerVars: {    //<===============================]HERE]
        controls: '0',
      },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  var done = false;

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.ENDED && !done) {
      player.loadVideoById('4MJRS-cLozU');
    }
  }
</script>


</body>

</html>

关于javascript - 覆盖 playerVars 控件 :attrib dynamically for videos in youtube API，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39748863/

30 4 0
文章推荐： java - 我应该在构造时加载 Java 对象的数据，还是通过方法调用显式加载？
文章推荐： mysql - 仅当两个或多个记录具有相同值时才连接两个表并分组
文章推荐： Java:这两个代码相同吗？
文章推荐： mysql - 将数据库时间戳值与今天的日期进行比较，并在 codeigniter 中获取结果
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com