javascript - 对于 JW Player，滚动上的最小化和 float 播放器无法正常工作

Question

我刚刚在 WordPress 页面上设置了 JW Player 实例。我想重新创建在 https://developer.jwplayer.com/jw-player/demos/advanced/minimize-and-float-video-on-scroll/ 处找到的功能播放器移动到页面的左侧或右侧并与用户一起滚动。我输入了 JW Player 给出的代码，如下所示:

    <div id="float-video-player" class="player-container"></div>

     <!-------------------------- JW Player Float and scroll ----------------------------->

<script type="text/javascript">

// initialize jwplayer
var playerInstance = jwplayer('float-video-player');

// player dom elements
var playerContainerEl = document.querySelector('.player-container');

// returns video player position from top of document
  function getElementOffsetTop(el) {
    var boundingClientRect = el.getBoundingClientRect();
    var bodyEl = document.body;
    var docEl = document.documentElement;
    var scrollTop = window.pageYOffset || docEl.scrollTop || bodyEl.scrollTop;
    var clientTop = docEl.clientTop || bodyEl.clientTop || 0;
    return Math.round(boundingClientRect.top + scrollTop - clientTop);
}

// returns the current y scroll position
function getScrollTop() {
    var docEl = document.documentElement;
    return (window.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0);
}

// configure jwplayer instance
playerInstance.setup({
    autostart: true,
    file: 'https://cdn.jwplayer.com/players/jgjfjfj',
    primary: 'html5',
    setFullscreen: true,
    width: '100%'
});

// when jwplayer instance is ready
playerInstance.on('ready', function() {
    var config = playerInstance.getConfig();
    var utils = playerInstance.utils;
    // get height of player element
    var playerHeight = config.containerHeight;

    // get player element position from top of document
    var playerOffsetTop = getElementOffsetTop(playerContainerEl);

    // set player container to match height of actual video element
    // this prevents container from disappearing and changing element positions
    // on page when player becomes minimized. this also leaves a nice visual
    // placeholder space for minimized player to return to when appropriate
    playerContainerEl.style.height = playerHeight + 'px';

    // below we handle window scroll event without killing performance
    // this is a minimal approach. please consider implementing something more extensive:
    // i.e. http://joji.me/en-us/blog/how-to-develop-high-performance-onscroll-event

    // determine player display when scroll event is called
    // if inline player is no longer visible in viewport, add class
    // .player-minimize to minimize and float. otherwise, remove the class to put
    // player back to inline inline position
    function onScrollViewHandler() {
        var minimize = getScrollTop() >= playerOffsetTop;

        utils.toggleClass(playerContainerEl, 'player-minimize', minimize);
        // update the player's size so the controls are adjusted
        playerInstance.resize();
    }

    // namespace for whether or not we are waiting for setTimeout() to finish
    var isScrollTimeout = false;

    // window onscroll event handler
    window.onscroll = function() {
        // skip if we're waiting on a scroll update timeout to finish
        if (isScrollTimeout) return;
        // flag that a new timeout will begin
        isScrollTimeout = true;
        // otherwise, call scroll event view handler
        onScrollViewHandler();
        // set new timeout
        setTimeout(function() {
            // reset timeout flag to false (no longer waiting)
            isScrollTimeout = false;
        }, 80);

    };

});
</script>

所以当我将代码推送到网站时，播放器就在那里，但预期的功能不起作用，是否缺少某些东西？

Answer 1

JW Player 演示中的代码要求您使用额外的 CSS，这些 CSS 已包含在 JozeAE 的答案中。

例如: utils.toggleClass(playerContainerEl, 'player-minimize', 最小化);

这要求您有一个类player-minimize，它定义最小化状态。

根据上面的答案(取自 JW Player 演示页面)，这将是 player-minimize 和 player-container (这是包装播放器的 DIV) :

        .player-container {
            background-color: black;
            float: left;
            margin: 20px 20px 10px 0;
            width: 500px;
        }

        .player-minimize .player-position {
            background-color: white;
            border-radius: 2px;
            bottom: 20px;
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
            left: 20px;
            padding: 7px;
            position: fixed;
            width: 300px;
            z-index: 1;
        }

不过，可以调整样式以满足您的需求。