玩的iframe视频上点击一个链接的JavaScript(play iframe video on

我已经使用了一个iframe video在我的网页。这是我的html代码

<iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
<a href="#" id="playvideo">Play video</a>

我要play视频onclick播放视频链接。我怎样才能做到这一点？

Answer 1:

此作品，其追加autoplay=1到url使视频开始播放。

附录：如果您的视频的来源还没有查询字符串那么这将是审慎的添加? 代替&作为有时的情况。这可以通过寻找其存在来完成。

<iframe id="video1" width="520" height="360" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
<a href="#" id="playvideo">Play video</a>
<script>
 //use .one to ensure this only happens once
 $("#playvideo").one(function(){
  //as noted in addendum, check for querystring exitence
  var symbol = $("#video1")[0].src.indexOf("?") > -1 ? "&" : "?";
  //modify source to autoplay and start video
  $("#video1")[0].src += symbol + "autoplay=1";
 });
</script>

然而，大多数人天生明白，如果他们想要的视频播放，他们将只需点击它，我建议只留下他们或开始自动播放视频了。

另外需要一提的是自动播放无法在移动设备上工作（搭载Android或iOS）

Answer 2:

我在结束SRC正确设置 - 自动播放= 1

   <iframe id="video1" width="450" height="280" src="http://www.youtube.com/embed/TJ2X4dFhAC0?enablejsapi" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
    <a href="#" id="playvideo">Play button</a>
    <script>
     $("#playvideo").click(function(){
      $("#video1")[0].src += "?autoplay=1";
     });
    </script>

Answer 3:

因为第一个答案是已经3岁，让我指向YouTube播放器API。这样，您可以远程控制您的嵌入式播放器。见https://developers.google.com/youtube/iframe_api_reference?hl=en

有了一个小的调整，就可以开始通过链接，而无需重新加载整个IFRAME视频：

<!DOCTYPE html>
<html>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>

    <!-- The Play-Link will appear in that div after the video was loaded -->
    <div id="play"></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: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        //event.target.playVideo();
        document.getElementById('play').innerHTML = '<a href="#" onclick="play();">Play Video</a>';
      }

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

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

Answer 4:

下面是另一个例子。这里检查： https://codepen.io/rearmustak/pen/VXXOBr

 const Player = document.getElementById('player2'); const PlayBtn = document.getElementById('play'); const stopBtn = document.getElementById('stop'); let times = 0, playY; const playVideo = PlayBtn.addEventListener( 'click' , () => { if(times == 0){ playY = Player.src += '?autoplay=1'; times = 1; } }); stopBtn.addEventListener( 'click' , () => { playY = playY.slice(0, -11); Player.src = playY times = 0; });

 .video-frame{ overflow: hidden; margin-bottom: 10px; } button{ border: none; background-color: #e75252; color: #ffffff; padding: 10px 15px; border-radius: 3px; cursor: pointer; } button:focus{ outline: 0; } #stop{ background-color: #ff0002; }

 <h1>Youtube video Play/Stop</h1> <div class="video-frame"> <iframe id="player2" width="560" height="315" src="https://www.youtube.com/embed/cs1e0fRyI18" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> </div> <button id="play">Play</button> <button id="stop">Stop</button>

Answer 5:

这里是链接，例如http://jsfiddle.net/WYwv2/5/

看看这个

<!DOCTYPE html> 
<html> 
<body> 
<a href="#" id="playvideo" onclick="playme()">Play video</a>
    <iframe id="video1" width="520" height="360"  frameborder="0" ></iframe>
<script>
function playme() {
document.getElementById("video1").src = 'http://www.w3schools.com/tags/mov_bbb.mp4';
}
</script>
</body> 
</html>

我们动态地设置视频的来源。

文章来源: play iframe video on click a link javascript