停止youtube视频并用图像替换

我正在使用嵌入的youtube视频。我需要用图像来替换它，并单击图像时开始播放视频，我已经实现了：停止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或其他元素，并同时用图像替换视频。

来源

2012-07-24 user1047517

使video_player innerhtml在聚焦和再次插入图像上留空。 – SVS 2012-07-24 11:46:40

你为什么不只是给的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-24 11:49:52

您可以举例说明start_video函数来处理像在stop_video函数中那样的对象。谢谢。 – user1047517 2012-07-24 12:05:24

我已将我的建议添加到我的答案中。感谢您标记:) – 2012-07-24 13:00:26

我建议你上的JavaScript的Youtube API您提供更多的控制不是嵌入一个iframe到您的网页阅读起来

来源

2012-07-24 11:45:42 epoch

解释downvote请:) – epoch 2012-07-24 12:46:13

我没有downvote你。 – user1047517 2012-07-24 13:50:45

@ user1047517，不，这意味着无论谁做:) – epoch 2012-07-24 14:05:23

回答

相关问题