单击YouTube视频上的海报属性时,视频将无法播放

时间:2019-07-03 17:44:08

标签: javascript html css

当我单击.gif时,我正在尝试播放视频。

我尝试了多个代码片段,并自己编写了代码,但尚未找到解决方案。

<div class="video" id="videoplayer">
    <img src="images/gifisdone.gif">
    <!-- <iframe width="940" height="529" src="https://www.youtube.com/embed/oUflzV5z9sc" frameborder="0" allowfullscreen></iframe>-->
</div> 

1 个答案:

答案 0 :(得分:0)

应该很简单。只需将点击呼叫添加到gif,然后加载视频。运行下面的代码片段进行测试。

   <!DOCTYPE html>
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="video" id="videoplayer">
<img src="https://media.giphy.com/media/H6niY8viJQvjYRJ7OD/giphy.gif" id="videolink1">
</div> 
<div id="divVideo">
<iframe width="420" height="345" >
</iframe>
</div>

</body>
<script>
$('#videolink1').click(function(event) {
var videoFile = 'https://www.youtube.com/embed/tgbNymZ7vqY'+'?&autoplay=1';
$('#divVideo iframe').attr('src', videoFile);
});
</script>
</html>