我正在使用嵌入式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&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或其他元素并同时用图像替换视频来停止此视频。
答案 0 :(得分:2)
我建议您阅读javascript Youtube API,它比向您的网页嵌入iframe提供更多控制权
答案 1 :(得分: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&rel=0&showinfo=0');
iframe.setAttribute('frameborder','0');
iframe.setAttribute('allowfullscreen','allowfullscreen');
document.getElementById('video_player').appendChild(iframe);
}