2

私は埋め込まれたYouTubeビデオを扱っています。それを画像に置き換える必要があり、画像をクリックすると、実装したビデオの再生が開始されます。

<script type="text/javascript">
   function start_video() {
      var iframe = '<iframe title="YouTube video player" width="590" height="360" src="http://www.youtube.com/embed/nCgQDjiotG0?autoplay=1&amp;rel=0&showinfo=0" frameborder="0" title="none" allowfullscreen></iframe>';
      document.getElementById("video_player").innerHTML = iframe;
   }
</script>

そしてhtml：

<div id="video_player"><img style="cursor: pointer;" onclick="start_video();" src="fake_image.jpg" alt="Play Video" /></div>

しかし、今、いくつかのdivまたは他の要素をクリックして、同時にビデオを画像に置き換えることで、このビデオを停止するのに問題があります。

4

2 に答える 2

2

ページに iframe を埋め込むよりもはるかに多くの制御を提供するjavascript Youtube APIを読むことをお勧めします。

于 2012-07-24T11:45:42.810 に答える
1

iframe に id を付けてから、iframe を削除してそこに画像を配置してみませんか?

function stop_video() {
    var elem = document.getElementById('video_iframe');
    var parent = elem.parentNode;
    parent.removeChild(elem);
    var image = document.createElement('img');
    image.setAttribute('src','yourImage.jpg');
    parent.appendChild(image);
}

また、あなたが行ったように innerHTML を設定しないことをお勧めします。実際には、上記のようなオブジェクトを処理する必要があります。

function start_video() {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('title','Youtube video player');
    iframe.setAttribute('width','590');
    iframe.setAttribute('height','360');
    iframe.setAttribute('src','http://www.youtube.com/embed/nCgQDjiotG0?autoplay=1&amp;rel=0&showinfo=0');
    iframe.setAttribute('frameborder','0');
    iframe.setAttribute('allowfullscreen','allowfullscreen');
    document.getElementById('video_player').appendChild(iframe);
}
于 2012-07-24T11:49:52.300 に答える