单击按钮时更改嵌入式 youtube 视频中的时间

Posted 2023-02-24

【中文标题】单击按钮时更改嵌入式 youtube 视频中的时间

【英文标题】：Change time in embedded youtube video when a button is clicked

【发布时间】：2014-12-03 03:25:22

【问题描述】：

我想嵌入一个 youtube 视频并提供按钮，当您点击它们时，它们会转到视频中的特定时间并从那里继续播放。 我尝试使用 jquery 并更改“src”属性，如下所示：

原文出处：

<iframe src="http://www.youtube.com/embed/PjDw3azfZWI?&t=5m30s&rel=0&amp">

JS：

$("#link1").click(function() 
    $("#video").attr("src", "http://www.youtube.com/embed/PjDw3azfZWI?&t=10m30s&rel=0&amp");
);

当我单击按钮时，这会导致浏览器刷新。

链接到我在想的图片：http://i.imgur.com/sCFZSIn.png。单击按钮应使视频跳转到指定的时间。

【问题讨论】：

添加 &t=37 其中“37”是视频的时间量应该可以解决问题。例如这是该视频的第 19 秒...youtube.com/watch?v=WoZ2kTlwKTk&t=19（石玫瑰 - 愚人金 - 以防你想知道 ;-)

那只是刷新页面

@Lightvvind，我的回答对你有用吗？

@JustinPowell 我让播放器开始工作，但 seekTo() 函数不会做任何事情。 pauseVideo() 等其他函数确实有效。

@Lightvvind，我在我的答案中添加了一个小提琴。

【参考方案1】：

您不应重新加载 iframe 来控制视频；使用 javascript API 方法。在这里查看 seekTo：https://developers.google.com/youtube/iframe_api_reference#Playback_controls

基本上，一旦您的 iframe 加载完毕，JS API 将调用 onYouTubeIframeAPIReady()，您可以在其中构造一个 YouTube 播放器对象。然后可以使用该播放器引用来控制视频，例如 player.seekTo()。

您仍然可以使用您的 iframe，如 this section 底部所述：

如入门部分所述，而不是编写 页面上的空元素，播放器 API 的 JavaScript 然后代码将替换为一个元素，您可以创建 标记自己。

...

如果你确实写了标签，那么当你构造 YT.Player 对象时，你不需要指定宽度和高度的值，它们被指定为标签的属性，或者 videoId 和 player 参数，这在 src URL 中指定。

您的代码缺少的部分是 YT.Player 对象，您必须在上述回调方法中构造它。这提供了对播放器控件的访问。

这是Fiddle 的演示：

var player, seconds = 0;
function onYouTubeIframeAPIReady() 
    console.log("player");
    player = new YT.Player('player', 
        events: 
          'onReady': onPlayerReady
        
      );


function onPlayerReady(event) 
    event.target.playVideo();


function seek(sec)
    if(player)
        seconds += sec;
        player.seekTo(seconds, true);
    

您可以将此代码放在单独的脚本中，但请确保它位于根范围内（例如在您的 head 标记中），而不是将其放在 onLoad 处理程序中。

【讨论】：

如何用 angulas js 控制器做到这一点？我试图在控制器中使用这些功能，然后加载 api 脚本和资源。但是还是不行？