Question

<div id=player></div>
<div id=playvideo style= "width:40px; height:80px; background-color:#2b2b2b;" >
<script src="https://apis.google.com/js/platform.js"></script>
<script type="text/javascript">
      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: '448',
          width: '763',
          playerVars: {
              'showinfo': 0,
              'controls': 0,
        listType: 'playlist',
        list: 'PLD7SqVUGDdDBw_xmMKTDF5MlBwys_KlUk'
            },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

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

      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
          player.stopVideo();
        }
      }
    </script>

我有一个这样的嵌入代码，我希望名为“playvideo”的div就像YouTube的播放按钮一样，我觉得这很简单，但我是JavaScript的新手，有人有想法吗？

Answer 1

您可以使用YouTube的播放器API功能：的 player.playVideo（）

所以...... HTML：

<div id="mydiv" onclick="play_this_video()">Play my video</div>

和JavaScript：

function play_this_video(){ player.playVideo(); }

YouTube的外部播放按钮嵌入了视频播放器

1 个答案: