时间戳

首页 > 解决方案 > 视频onclick从地方切换

javascript - 视频onclick从地方切换

问题描述

如果您在页面上向下滚动，则有 4 个视频。如果您单击其中一个小视频，我试图做到这一点，视频会向上移动到大部分。如果您单击一个小视频，它会将您发送到 YouTube。

您将在代码中看到其他文件中的一些变量。

这是我的代码：

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: '<?php echo $videoTop; ;?>',
        events: {
            'onReady': onPlayerReady,
        }
    });
}
$('.video').on('click',function(){
    $('.video').removeClass('overlay');
});
function onPlayerReady(event) {
    $('.video').click(function() {
        event.target.playVideo();
    });
}
$(document).ready(function() {
    $('#player').hide();
    $('#play_vid').click(function() {
        $('#player').show();
        $('#play_vid').hide();
    });
});

$('#image_id').click(function() {
  $("#some_id iframe").attr('src', $("#some_id iframe", parent).attr('src') + '?autoplay=1'); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-12 col-sm-5" id="videos">
<div class="video overlay" autoplay=1>
    <div id="player"></div>
    <div id="play_vid" style="background-image: url('images/<?php echo $overlayImage;?>')"></div>
</div>
    <h5><?php echo $video_h; ?></h5>
<div class="row"> 
    <div class="col-md-4"><a href="https://www.youtube.com/watch?v=<?php echo $vid1;?>" class="video"><img src="images/<?php echo $vidImg1;?>" alt="thumb"/></a></div>
    <div class="col-md-4"><a href="https://www.youtube.com/watch?v=<?php echo $vid2;?>" class="video"><img src="images/<?php echo $vidImg2;?>" alt="thumb"/></a></div>
    <div class="col-md-4"><a href="https://www.youtube.com/watch?v=<?php echo $vid3;?>" class="video"><img src="images/<?php echo $vidImg3;?>" alt="thumb"/></a></div>
</div>
</div>

有人可以帮我解决这个问题吗？

标签： javascriptphp

解决方案

您必须preventDefault()点击...小视频是指向 youtube 的链接，因此默认情况下浏览器将导航到该链接。在这种情况下，您不想在那里导航，您想更改突出显示的视频。

Event 接口的 preventDefault() 方法告诉用户代理，如果事件没有得到显式处理，则不应像通常那样采取其默认操作。

[资源]

$('.video').click(function(event) {

  // event is the action of the click
  event.preventDefault();

  // run your code to display the code into the "larger" box
  renderVideo();

});

每当您执行一项操作（例如提交表单）时，您都可以使用它event.preventDefault()来更改浏览器的行为。

推荐阅读