如何让<a>标签跳转嵌入YouTube视频指定时间戳且不刷新视频

你当前通过修改iframe的src属性实现时间戳跳转的方式，会触发视频重新加载（也就是你看到的刷新）。要实现无刷新跳转，必须使用YouTube IFrame Player API——它允许直接控制已加载的视频播放器，无需重新请求视频资源。

完整实现代码 #

HTML部分

<iframe id="videoPlayer" class="lssiframevideo" title="video" frameborder="0" 
        allow="autoplay; encrypted-media;" allowfullscreen 
        src="https://www.youtube-nocookie.com/embed/VsnfaqwjE04?autoplay=0&controls=1&showinfo=0&loop=1&start=0&enablejsapi=1"></iframe>

<div class="bottomtextcol">
    <a href="javascript:void(0)" onclick="jumpToTime(30)">0:30</a> Stamp A 
</div>
<div class="bottomtextcol">
    <a href="javascript:void(0)" onclick="jumpToTime(45)">0:45</a> Stamp B 
</div>
<div class="bottomtextcol">
    <a href="javascript:void(0)" onclick="jumpToTime(70)">1:10</a> Stamp C 
</div>

JavaScript部分

let player;

// 初始化YouTube播放器API
function onYouTubeIframeAPIReady() {
    player = new YT.Player('videoPlayer', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

// 播放器就绪后的回调（可选，可添加自动播放等逻辑）
function onPlayerReady(event) {
    // 如需就绪后自动播放，取消下方注释
    // event.target.playVideo();
}

// 核心跳转方法：跳转到指定秒数，无刷新
function jumpToTime(seconds) {
    if (player) {
        // seekTo第二个参数设为true表示精准跳转，false为近似跳转
        player.seekTo(seconds, true);
        // 如需跳转后自动播放，取消下方注释
        // player.playVideo();
    }
}

// 动态加载YouTube API脚本
(function() {
    const tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
})();

关键说明 #

1. 启用API支持：在iframe的src中添加enablejsapi=1参数，这是让API能控制视频的必要条件。
2. seekTo方法：这是实现无刷新跳转的核心，直接调用播放器实例的seekTo(秒数, 是否精准)方法，就能让视频跳转到指定位置，不会重新加载。
3. 避免页面跳转：将链接的href改为javascript:void(0)，防止点击时触发页面锚点跳转。

内容的提问来源于stack exchange，提问作者NeverRests