可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have used a iframe video in my web page. This is my html code

<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>

I need to play video onclick the play video link. How can i do that?

回答1:

This works, it appends autoplay=1 to the url causing the video to start playing.

addendum: If your video's source does not already have a querystring then it would be prudent to add a ? instead of a &, as is sometimes the case. This can be done by looking for its existence.

<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>

However, most people inherently understand that if they want a video to play, they will just click on it and I would suggest just leaving that to them or starting the video off with autoplay.

Also need to mention that autoplay does not work on mobile devices (powered by Android or iOS)

回答2:

I correctly set in end src - ?autoplay=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>

回答3:

since the first answer is already 3 years old, let me point to the Youtube Player API. With that you can remote control your embedded player. See https://developers.google.com/youtube/iframe_api_reference?hl=en

With a small adjustment, you can start the video via link and without reloading the entire 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>

回答4:

Here is another example. Check this here: 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>

回答5:

here is link to example http://jsfiddle.net/WYwv2/5/

Check out this

<!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>

We set the source of video dynamically.