使用playerJS-youtube

Question

我试图播放视频＆amp; youtube使用playerJS和playerJs-youtube插件。

当我将youtube src放入数据设置时，它只在页面加载时工作正常。但我需要在运行时onClick事件上填充youtube视频。

此jsfiddle包含我目前的示例代码，该代码无法播放YouTube视频。当我应用load（）函数时，它实际上并没有加载youtube iframe。请指导我如何实现这一目标。

以下是我使用的代码示例：

<div id="youtube_player" style="font-family: Arial Unicode MS;">
    <video
      id="v2"
      class="video-js vjs-default-skin"
      controls
      autoplay
      width="640" height="264"
      data-setup='{}'
    >
    </video>
</div>
<ul id="playlist">
  <li data-loc="http://media.w3.org/2010/05/sintel/trailer.mp4" data-type="video/mp4">Sintel</li>
  <li data-loc="http://media.w3.org/2010/05/bunny/trailer.mp4" data-type="video/mp4">Bunny</li>
  <li data-loc="http://vjs.zencdn.net/v/oceans.mp4" data-type="video/mp4">Oceans</li>
  <li data-loc="https://www.youtube.com/watch?v=MWHpoJT3qK4" data-type="video/youtube">Youtube</li>
</ul>

<script type="text/javascript">
var list = document.getElementById('playlist');
var items = list.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
    var item = items[i];

    item.addEventListener("click", function (e) {
        var data_type = this.getAttribute("data-type");
        var data_source = this.getAttribute("data-loc");

        if(data_type == 'video/youtube'){
            var p = document.getElementById("v2");
            var v = p.getElementsByTagName("video")[0];
            $(v).attr('data-setup', '{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "iv_load_policy": 1 } }');
            $(v).prop('data-setup', '{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "iv_load_policy": 1 } }');

            v.load();
            v.play();
        }

    });
}
</script>