12

iframe video私は自分のWebページでを使用しました。これは私の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どうやってやるの？

4

6 に答える 6

29

これは機能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を搭載）では機能しないことにも言及する必要があります

于 2012-11-29T05:08:09.660 に答える
5

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>
于 2017-05-19T11:00:32.787 に答える
3

別の例を示します。ここでこれをチェックしてください：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>

于 2018-03-31T05:26:30.253 に答える
2

最初の答えはすでに3年前なので、YoutubePlayerAPIを紹介します。これにより、組み込みプレーヤーをリモートコントロールできます。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>
于 2015-11-25T08:42:52.333 に答える
0

ここに例へのリンクがあります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>
​

ビデオのソースを動的に設定します。

于 2012-11-29T05:21:14.250 に答える
0

それは私のために働いています。これをチェックしてください。

$("#player").on("pause", function(e) {
          clearTimeout(playTimeout);
      });
      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: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
            }
          });
        }
      function onPlayerReady(event) {
        event.target.playVideo();
          }
       var done = false;
        function onPlayerStateChange(event) {
          if (event.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 2000);//replace time here 
            $("#player").get(0).load();
            $("#player").get(0).pause();
            done = true;
          }
        }
        function stopVideo() {
          player.stopVideo();
        }
于 2020-12-17T06:12:08.540 に答える