javascript – 如何通过YouTube播放器IFrame API区分“搜索”和“暂停”

2019-07-18 03:33:58 阅读：183 来源： 互联网

我有一个youtube视频,我已经嵌入了youtube的iFrame API.我想要：

>当用户暂停视频时显示半透明叠加层(WORKS)
>当用户播放视频时隐藏该叠加层(WORKS)
>当用户通过youtube控件“搜索”时,不显示叠加层(可能？)

无法控制搜索行为.可能吗？

要重现,请将搜索保持在相同位置几秒钟,然后观看叠加显示.示例jsfiddle在这里：
http://jsfiddle.net/dNU84/3/

var ytvideo;
window.onYouTubePlayerAPIReady = function () {
    ytvideo = new YT.Player('ytvideo', {
        width: '400',
        height: '300',
        videoId: 'BOksW_NabEk',
        playerVars: {
            'autoplay': 1,
            'controls': 1
        },
        events: {
            "onStateChange": onPlayerStateChange
        }
    });
}

function showOverlay() {
    if ($('.video .video-overlay').length) $('.video .video-overlay').fadeIn(1200);
}

function hideOverlay() {
    if ($('.video .video-overlay').length) $('.video .video-overlay').hide();
}

var overlay;
function onPlayerStateChange(event) {
    console.log(event.data);
    clearTimeout(overlay);

    // youtube fires 2xPAUSED, 1xPLAYING on seek
    if (event.data == YT.PlayerState.PAUSED) {
        overlay = setTimeout(showOverlay, 1000);
    }
    if (event.data == YT.PlayerState.PLAYING) {
        overlay = hideOverlay();
    }
}

解决方法:

我知道这个问题已经过时了,但我只是在寻找解决方案,因为我在暂停时会显示一个叠加层,但是每次用户搜索时都会显示叠加层,因为两个事件值都是2.

我遇到的最简单的解决方案是设置一秒超时：

setTimeout(function() {
  if ( event.target.getPlayerState() == 2 ) {
    // execute your code here for paused state
  }
}, 1000)

这只会在暂停状态下执行代码,而不是在搜索时执行,因为在1秒超时之后,如果用户正在寻求,则PlayerState将再次为1.

标签：javascript,youtube,youtube-api
来源： https://codeday.me/bug/20190718/1492557.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 如何通过YouTube播放器IFrame API区分“搜索”和“暂停”