【问题标题】:Determine how long embedded YouTube video was played for after it pauses确定嵌入的 YouTube 视频在暂停后播放了多长时间
【发布时间】:2019-04-08 01:03:00
【问题描述】:

我想在我的页面上嵌入一个 YouTube 视频,然后获取视频在暂停后播放了多少秒。我可以通过获取play/playing/ended/pause 事件的时间,然后计算它们之间的时间差,对普通的 HTML video 标签执行此操作;我在https://jsfiddle.net/p56a1r45/2/ 有一个演示。但是我不确定如何为 YouTube 视频做同样的事情。

我该怎么做?

【问题讨论】:

  • 请不要只发布 jsfiddle 的链接,而是插入您的代码(最好是 SO sn-p)或除此之外。也请不要将关键字而不是标签放入文本中(我已经为您解决了这个问题,并且还改进了问题的语法/措辞)。请使用“编辑”按钮改进您的问题
  • @YakovL 嗯...虽然这通常是我们对人们的要求,但在这种情况下的代码似乎与问题相关,冗长,并且在任何情况下都取决于进一步的场外资源发挥作用;我实际上认为把它放在异地可能是正确的做法。
  • @MarkAmery 好吧,在您编辑后它会好一些,但实际上我想说提供的代码不是重现问题并显示如何提取经过时间的最小代码“普通”视频,因此在此处添加代码后,我建议将其减少为minimal reproducible example。根据您对特定事件的评论(编辑),它更接近我认为适合 SO 的内容,但我想说这个问题可以(并且可能应该)进一步改进。无论如何,让萨钦决定

标签: javascript php jquery youtube


【解决方案1】:

首先,让我们注意 Okeksii 在 2 点上是正确的:

  1. (几乎引用)Youtube 链接不是直接的视频链接。 YouTube 视频通常位于 iframe 中。这意味着您需要访问该 iframe 以获取一些数据或解析来自 YouTube 的直接链接。但出于安全原因,您无法直接从您的网站访问 YouTube iframe。
  2. 您必须改用 youtube API

相关的 API 是IFrame Player API。您必须listen (player.addEventListener) 到某些事件(大概onStateChange 就足够了:至少它在播放和暂停时触发),获取当前时间(player.getCurrentTime())并计算经过的时间。

不过,在此之前,你必须学习如何setup the API usage

【讨论】:

    【解决方案2】:

    HTML5 Video

    How it Works
    The controls attribute adds video controls, like play, pause, and volume.
    
    It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
    
    The <source> element allows you to specify alternative video files which the browser may choose from. **The browser will use the first recognized format.**
    
    The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
    

    如您所见 浏览器将使用第一个识别的格式。

    Youtube 链接不是直接的视频链接。 Youtube 视频通常位于一个框架中。这意味着您需要访问框架来获取一些数据或解析来自 youtube 的直接链接。

    但出于安全原因,据我所知,您无法从您的网站访问 youtube iframe

    你可以试试Youtube API也许你能找到你要找的东西

    【讨论】:

    • -1 因为第一个链接、引号(错误地格式化为代码块而不是引号)和下面的句子都无关紧要。一旦你真正开始谈论 YouTube,它至少是相关的,但没有回答这个问题;这实际上只是几个指针。
    • 实际上,您也指向了错误的 API。您应该详细说明您的答案以使其有用
    猜你喜欢
    • 2014-08-02
    • 2014-04-22
    • 1970-01-01
    • 2015-03-20
    • 2013-08-16
    • 2018-05-28
    • 1970-01-01
    • 1970-01-01
    • 2014-08-30
    相关资源
    最近更新 更多