点击不同的播放按钮

我有一个进全的短片时如何更新YouTube视频ID。当用户点击播放按钮时，我想要将该特定视频ID加载到YouTube API中找到的videoID变量中。现在，我已成功地在现场进行编程，以开始播放视频每次播放按钮被点击，但是，ID（被指定为编辑文章时使用ACF $video_id一个自定义字段）不更新的时间。下面是我进的样子：点击不同的播放按钮

我试着将看player.loadVideoById，但没有多少运气。

这里是我的YouTube API代码：

function onYouTubeIframeAPIReady() { 
    player = new YT.Player("player", { 
     videoId: "HoVWmW0Zdmo", 
     playerVars: { 
      controls: '0', 
      html5: '1', 
      cc_load_policy: '0', 
      disablekb: '1', 
      iv_load_policy: '3', 
      modestbranding: '1', 
      showinfo: '0', 
      rel: '0', 
      autoplay: '0', 
     }, 
     events: { 
      "onReady": onPlayerReady, 
      "onStateChange": onPlayerStateChange 
     } 

    }); 
} 

//the id placed below is just a sample id to see if I could even get the ID to change...which I couldnt 
jQuery(".media-circle").on("click", function() { 
     player.loadVideoById("Vw4KVoEVcr0"); 
    });

这是播放按钮的HTML代码段。类.media-circle是包含覆盖专辑插图的playpause按钮的圆形。

<div class="album-dark-overlay play"> 
    <div class="media-circle"> 
     <i class="icon ion-ios-play"></i><i class="icon ion-pause"></i> 
    </div> 
</div>

是否必须拉出帖子ID以便JavaScript知道要查找哪个视频ID？

来源

2016-12-28 Jordan Lewallen

这就是我现在很困惑的东西。我正在使用用户在编辑帖子时添加videoID的自定义字段。然后我把它变成一个php $ video_id = get_field（'video_id'）。 'media-circle'是围绕播放按钮的圆圈。所以当用户点击圆圈区域的任何地方时，播放按钮（圆圈内）会切换到暂停按钮（我已成功完成此部分）。我还设法在播放按钮切换时触发视频开始播放，而不是链接到特定帖子的视频，该视频被点击了@NewToJS –

您是如何传递新视频ID的？它与'media-circle'元素被点击有什么关系？您需要传递新的视频ID，以便玩家知道该玩什么。目前，您每次点击“媒体圈”时都会告诉它播放相同的视频。为什么不给“媒体圈”一个“ID”，你可以将他的'ID'设置为视频ID，这样当你点击媒体圈时，你可以定位该元素的ID，播放器将知道哪个视频玩...示例'player.loadVideoById（this.id）;' – NewToJS

@NewToJS我对loadVideoByID的理解是，它采用的参数是视频的ID（一串随机字符），而不是html元素？这个html元素如何链接到在帖子中发现的视频？ –

如果使用player.loadVideoById("Vw4KVoEVcr0");它会播放视频Vw4KVoEVcr0。

既然你有跟团的每一次media-circle所有元素的onclick事件侦听器单击该元素将继续加载相同的视频ID除非你告诉它来播放不同的ID。

当你构建的视频效果/列表，你需要告诉它运行功能时ID应该发挥什么样的视频。如果你给每个media-circle的ID相匹配的视频应该发挥你可以针对触发改变功能的元件的ID /加载新的视频。

下面是一个例子。我已经设置了图像的视频IDID点击时应该发挥。你可以看到他们全部共享同一个media-circle类。 JsFiddle Demo

演示的源代码

HTML

<div id="player"></div><hr/> 
<img id="ovrGzbsQZqc" class="media-circle" src="http://i.ytimg.com/vi/ovrGzbsQZqc/0.jpg"/>Pegboard Nerds - Emoji VIP [Monstercat Official Music Video]<br> 
<img id="YnwsMEabmSo" class="media-circle" src="http://i.ytimg.com/vi/YnwsMEabmSo/0.jpg"/> Marshmello - Alone [Monstercat Official Music Video]<br> 
<img id="-7Ok0O2nQaA" class="media-circle" src="http://i.ytimg.com/vi/-7Ok0O2nQaA/0.jpg"/> Pegboard Nerds - Melodymania [Monstercat EP Release]<br>

的Javascript/jQuery的

var tag = document.createElement('script'); 
tag.src = "https://www.youtube.com/iframe_api"; 
var firstScriptTag = document.getElementsByTagName('script')[0]; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
var player; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '200', 
     width: '350', 
     videoId: 'HoVWmW0Zdmo', 
     events: { 
      'onReady': onPlayerReady 
     } 
    }); 
} 
function onPlayerReady(event) { 
    event.target.playVideo(); 
} 
$(function() { 
    jQuery(".media-circle").on("click", function() { 
     player.loadVideoById(this.id); 
    }); 
});

CSS

img{max-height:100p;max-width:150px;}

如果您对源代码的任何问题，上述请在下面发表评论，我会尽快回复您。

我希望这会有所帮助。快乐的编码！

来源

2016-12-28 04:33:20 NewToJS

点击不同的播放按钮

回答

相关问题