使用 jQuery 播放 link 列表中的第一个 YouTube 嵌入式视频

Question

我正在调用一个循环来生成 link 的 YouTube 嵌入式视频列表。当我单击任何 link 时，相关视频将在 iFrame 中打开。但问题是，当我第一次加载页面时，它不会在 iFrame 中显示任何视频，甚至在 iFrame 中也不会显示。我需要点击 link 来加载视频。我想在加载页面时自动加载列表的第一个视频。

视频的iFrame：

    <h4 id="videoTitle"></h4>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe id="frame" name="frame" width="560" height="315" src="about:blank" frameborder="0" 
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
        </iframe>
    </div>

这是生成视频列表的循环，我使用的是 laravel，所以代码如下所示：

@foreach($topic->videos as $video)
    <li>
        <a href="{{ $video->url }}" class="ytLink">Play Video</a>
    </li>
@endforeach

这是我的 jQuery 代码：

<script>
    $('.ytLink').on('click', function (e) {
         $('#frame')[0].src = $(this).attr('href') + '?autoplay=1';
         e.preventDefault();
         $('#videoTitle').text($(this).text());
    });
</script>

谁能帮我如何自动加载第一个视频？

Answer 1

我在加载文档时触发了对您的第一个 link 的点击。

我使用 $(document).ready() 函数让您的代码在文档加载并准备好使用时执行。我将您的代码粘贴到此函数中。在我找到第一个 link 和 $('.ytLink').eq(0) 之后，我在这个元素上使用 .trigger('click')。所以这个触发器将在文档加载时运行。

有关 .eq() 函数的更多信息。

以及有关 .ready() 函数的更多信息。

$(document).ready(function() {
   $('.ytLink').on('click', function (e) {
         $('#frame')[0].src = $(this).attr('href') + '?autoplay=1';
         e.preventDefault();
         $('#videoTitle').text($(this).text());
    });
  $('.ytLink').eq(0).trigger('click');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 id="videoTitle"></h4>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe id="frame" name="frame" width="560" height="315" src="about:blank" frameborder="0" 
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
        </iframe>
    </div>
 
 
 <li>
        <a href="https://www.youtube.com/watch?v=Vhh_GeBPOhs" class="ytLink">Play Video</a>
    </li>
    <li>
        <a href="https://www.youtube.com/watch?v=Vhh_GeBPOhs" class="ytLink">Play Video</a>
    </li>
    <li>
        <a href="https://www.youtube.com/watch?v=Vhh_GeBPOhs" class="ytLink">Play Video</a>
    </li>

使用 jQuery 播放 link 列表中的第一个 YouTube 嵌入式视频

Play first youtube embedded video from a list of link using jQuery

javascript

youtube

jquery

youtube-api

laravel