【问题标题】:YouTube currentTime with jQuery使用 jQuery 的 YouTube 当前时间
【发布时间】:2015-05-01 05:30:59
【问题描述】:

如何获取 YouTube 视频的当前时间?

我一直在 YouTube api 中搜索,但我不明白: https://developers.google.com/youtube/js_api_reference?csw=1

我一直在 Stack 中搜索并尝试应用他们所说的但它不起作用。可能我错过了一些我不明白的东西:
Youtube API returning current time
Getting Current YouTube Video Time

如果有任何指导知道从哪里开始,我将不胜感激

你可以自己查:http://jsfiddle.net/twL9z8e1/

$("#bookmarkBoto").click(function() {
		
    //var time = $("#yt").currentTime();//no
	//var time = $("#yt").getCurrentTime();//no		
    $('#check').text(time);
			
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<iframe id="yt" name="yt" width="720" height="405" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allowfullscreen></iframe>

<br><br>

<div id="bookmarkBoto">bookmarkBoto</div>
<div id="check">check</div>

【问题讨论】:

    标签: jquery youtube youtube-api


    【解决方案1】:

    没有示例方式,您需要使用YouTube API。这是javascript代码。最后我做了一个活生生的例子。

    JAVASCRIPT

    var tag = document.createElement('script');
    
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }
    
    function onPlayerReady(event) {
        event.target.playVideo();
    }
    
    $('button').click(function() {
      console.log(player.getCurrentTime())
    })
    

    HTML

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
      <meta charset="utf-8">
      <title>JS Bin</title>
    </head>
    <body>
      <iframe id="player" width="640" height="360" src="https://www.youtube.com/embed/zua0_IXcPFY?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
    
      <button>click time</button>
    
    </body>
    </html>
    

    LIVE DEMO

    【讨论】:

    • 抱歉,我是初学者。我只是不明白你的代码。我在问单击一个按钮并在 var 和 jQuery 中获取视频的 currentTime
    • 它在 js bin 中工作,但如果我复制粘贴并放入我的服务器它不起作用。在控制台中我有这个错误:[错误] 阻止了原点为“youtube.com”的帧访问原点为“myDomain”的帧。请求访问的帧具有“https”协议,被访问的帧具有“http”协议。协议必须匹配。 (匿名函数)(html5player.js,第 828 行)全局代码(html5player.js,第 1688 行)我尝试了我在这里看到的内容:这并没有解决错误,也看不到 console.log currentTime
    • @segon 从 iframe 中的 https 中删除 s。喜欢src="http://www.youtube.com/embed/zua0_IXcPFY?enablejsapi=1"
    • 我从 iframe 中的 https 中删除了 s,我在控制台中有相同的消息
    • youtube.com/embed/zua0_IXcPFY?enablejsapi=1&origin=http://… 中添加选项来源。给http加个s
    猜你喜欢
    • 2014-07-02
    • 2012-03-20
    • 2011-12-10
    • 1970-01-01
    • 2011-10-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-23
    相关资源
    最近更新 更多