JW Player 的滚动播放器最小化和浮动播放器无法正常工作
Minimize and Float Player on Scroll not working correctly for JW Player
我刚刚在 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>
因此，当我将代码推送到站点时，播放器在那里，但预期的功能不起作用，是否缺少某些内容？
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.demo-layout-content {
margin-right: 250px;
margin-left: 250px;
}
.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;
}
.demo-single .demo-layout-content .jwplayer {
margin: 0;
}
.demo-layout-content {
text-align: left;
}
.demo-single .demo-layout-content h2 {
font-size: 42px;
font-weight: 700;
margin-top: 20px;
}
.demo-single .demo-layout-content p,
.demo-single .demo-layout-content p + p {
margin-top: 20px;
}
.demo-single .demo-layout-vertical .demo-layout-code {
max-width: 900px;
width: 100%;
} </style>
</head>
<div class="demo-container">
<div class="demo-layout-vertical">
<div class="demo-layout-content">
<script src="//content.jwplatform.com/libraries/IDzF9Zmk.js"></script>
<div class="player-container">
<div class="player-position">
<div id="player"></div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui ex, suscipit eu ultrices et, congue nec quam. Sed ultricies bibendum quam at sollicitudin. Mauris ut dapibus sapien. Sed turpis mauris, cursus in enim ut, sodales tempus tortor. Donec varius aliquam massa. Donec fermentum pellentesque molestie. Integer varius porta vehicula. Etiam volutpat nibh et nisl malesuada, vel auctor tellus commodo. Aliquam quis pharetra diam. Aliquam efficitur molestie viverra. Curabitur eu vulputate odio. Praesent sollicitudin tincidunt rhoncus. Phasellus nunc metus, blandit quis arcu at, feugiat viverra lorem. Phasellus sollicitudin augue at tincidunt ullamcorper. Quisque non ipsum augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui ex, suscipit eu ultrices et, congue nec quam. Sed ultricies bibendum quam at sollicitudin. Mauris ut dapibus sapien. Sed turpis mauris, cursus in enim ut, sodales tempus tortor. Donec varius aliquam massa. Donec fermentum pellentesque molestie. Integer varius porta vehicula. Etiam volutpat nibh et nisl malesuada, vel auctor tellus commodo. Aliquam quis pharetra diam. Aliquam efficitur molestie viverra. Curabitur eu vulputate odio. Praesent sollicitudin tincidunt rhoncus. Phasellus nunc metus, blandit quis arcu at, feugiat viverra lorem. Phasellus sollicitudin augue at tincidunt ullamcorper. Quisque non ipsum augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui ex, suscipit eu ultrices et, congue nec quam. Sed ultricies bibendum quam at sollicitudin. Mauris ut dapibus sapien. Sed turpis mauris, cursus in enim ut, sodales tempus tortor. Donec varius aliquam massa. Donec fermentum pellentesque molestie. Integer varius porta vehicula. Etiam volutpat nibh et nisl malesuada, vel auctor tellus commodo. Aliquam quis pharetra diam. Aliquam efficitur molestie viverra. Curabitur eu vulputate odio. Praesent sollicitudin tincidunt rhoncus. Phasellus nunc metus, blandit quis arcu at, feugiat viverra lorem. Phasellus sollicitudin augue at tincidunt ullamcorper. Quisque non ipsum augue.</p>
<p>Donec eget urna sit amet tellus varius efficitur ac sodales lorem. Nullam id elit eros. Etiam finibus nunc vel ante condimentum, eu ullamcorper lorem commodo. Maecenas pretium, nulla id iaculis convallis, lectus dui feugiat arcu, sit amet placerat augue turpis quis ante. Sed sit amet ornare dui. Ut maximus suscipit dictum. Fusce vitae justo tortor. Cras ac vestibulum augue, sed tristique felis. Nam tincidunt sapien velit, dignissim tempus justo laoreet in.</p>
<p>Vivamus eleifend congue lectus, quis ullamcorper tortor accumsan non. Duis vitae mattis tortor. Nulla vitae odio enim. Praesent eu orci at elit venenatis luctus. Praesent at luctus mauris. Maecenas accumsan posuere varius. Suspendisse id vehicula mauris. Vestibulum id neque vitae dui lobortis eleifend non sed erat. Nunc posuere augue nec turpis ornare facilisis. Vivamus lectus justo, commodo sed molestie consequat, dictum sed est. Maecenas semper velit placerat ex finibus rhoncus. Duis nisi justo, pharetra ac ipsum ac, gravida venenatis risus. Praesent eu est ultrices, lobortis felis quis, volutpat augue. Mauris non varius lacus. Etiam pulvinar ornare lectus et tristique.</p></div></div></div>
<script type="text/javascript">// initialize jwplayer
var playerInstance = jwplayer('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": "//content.jwplatform.com/manifests/vM7nH0Kl.m3u8",
"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>
<script type="text/javascript">
function setVersion() {
if (typeof jwplayer === 'undefined') {
setTimeout(setVersion, 100);
return;
}
if (jwplayer && jwplayer().id) {
jwplayer().on('ready', function() {
document.getElementById('demo-player-version').innerHTML = jwplayer.version.split('+')[0];
});
}
}
setVersion();</script>
</html>
JW Player 演示中的代码需要您使用额外的 CSS，它们包含在 JozeAE 的答案中。
例如：
utils.toggleClass(playerContainerEl, 'player-minimize', minimize);
这需要您有一个 class、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;
}
不过，可以根据您的需要调整样式。
我刚刚在 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>
因此，当我将代码推送到站点时，播放器在那里，但预期的功能不起作用，是否缺少某些内容？
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.demo-layout-content {
margin-right: 250px;
margin-left: 250px;
}
.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;
}
.demo-single .demo-layout-content .jwplayer {
margin: 0;
}
.demo-layout-content {
text-align: left;
}
.demo-single .demo-layout-content h2 {
font-size: 42px;
font-weight: 700;
margin-top: 20px;
}
.demo-single .demo-layout-content p,
.demo-single .demo-layout-content p + p {
margin-top: 20px;
}
.demo-single .demo-layout-vertical .demo-layout-code {
max-width: 900px;
width: 100%;
} </style>
</head>
<div class="demo-container">
<div class="demo-layout-vertical">
<div class="demo-layout-content">
<script src="//content.jwplatform.com/libraries/IDzF9Zmk.js"></script>
<div class="player-container">
<div class="player-position">
<div id="player"></div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui ex, suscipit eu ultrices et, congue nec quam. Sed ultricies bibendum quam at sollicitudin. Mauris ut dapibus sapien. Sed turpis mauris, cursus in enim ut, sodales tempus tortor. Donec varius aliquam massa. Donec fermentum pellentesque molestie. Integer varius porta vehicula. Etiam volutpat nibh et nisl malesuada, vel auctor tellus commodo. Aliquam quis pharetra diam. Aliquam efficitur molestie viverra. Curabitur eu vulputate odio. Praesent sollicitudin tincidunt rhoncus. Phasellus nunc metus, blandit quis arcu at, feugiat viverra lorem. Phasellus sollicitudin augue at tincidunt ullamcorper. Quisque non ipsum augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui ex, suscipit eu ultrices et, congue nec quam. Sed ultricies bibendum quam at sollicitudin. Mauris ut dapibus sapien. Sed turpis mauris, cursus in enim ut, sodales tempus tortor. Donec varius aliquam massa. Donec fermentum pellentesque molestie. Integer varius porta vehicula. Etiam volutpat nibh et nisl malesuada, vel auctor tellus commodo. Aliquam quis pharetra diam. Aliquam efficitur molestie viverra. Curabitur eu vulputate odio. Praesent sollicitudin tincidunt rhoncus. Phasellus nunc metus, blandit quis arcu at, feugiat viverra lorem. Phasellus sollicitudin augue at tincidunt ullamcorper. Quisque non ipsum augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui ex, suscipit eu ultrices et, congue nec quam. Sed ultricies bibendum quam at sollicitudin. Mauris ut dapibus sapien. Sed turpis mauris, cursus in enim ut, sodales tempus tortor. Donec varius aliquam massa. Donec fermentum pellentesque molestie. Integer varius porta vehicula. Etiam volutpat nibh et nisl malesuada, vel auctor tellus commodo. Aliquam quis pharetra diam. Aliquam efficitur molestie viverra. Curabitur eu vulputate odio. Praesent sollicitudin tincidunt rhoncus. Phasellus nunc metus, blandit quis arcu at, feugiat viverra lorem. Phasellus sollicitudin augue at tincidunt ullamcorper. Quisque non ipsum augue.</p>
<p>Donec eget urna sit amet tellus varius efficitur ac sodales lorem. Nullam id elit eros. Etiam finibus nunc vel ante condimentum, eu ullamcorper lorem commodo. Maecenas pretium, nulla id iaculis convallis, lectus dui feugiat arcu, sit amet placerat augue turpis quis ante. Sed sit amet ornare dui. Ut maximus suscipit dictum. Fusce vitae justo tortor. Cras ac vestibulum augue, sed tristique felis. Nam tincidunt sapien velit, dignissim tempus justo laoreet in.</p>
<p>Vivamus eleifend congue lectus, quis ullamcorper tortor accumsan non. Duis vitae mattis tortor. Nulla vitae odio enim. Praesent eu orci at elit venenatis luctus. Praesent at luctus mauris. Maecenas accumsan posuere varius. Suspendisse id vehicula mauris. Vestibulum id neque vitae dui lobortis eleifend non sed erat. Nunc posuere augue nec turpis ornare facilisis. Vivamus lectus justo, commodo sed molestie consequat, dictum sed est. Maecenas semper velit placerat ex finibus rhoncus. Duis nisi justo, pharetra ac ipsum ac, gravida venenatis risus. Praesent eu est ultrices, lobortis felis quis, volutpat augue. Mauris non varius lacus. Etiam pulvinar ornare lectus et tristique.</p></div></div></div>
<script type="text/javascript">// initialize jwplayer
var playerInstance = jwplayer('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": "//content.jwplatform.com/manifests/vM7nH0Kl.m3u8",
"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>
<script type="text/javascript">
function setVersion() {
if (typeof jwplayer === 'undefined') {
setTimeout(setVersion, 100);
return;
}
if (jwplayer && jwplayer().id) {
jwplayer().on('ready', function() {
document.getElementById('demo-player-version').innerHTML = jwplayer.version.split('+')[0];
});
}
}
setVersion();</script>
</html>
JW Player 演示中的代码需要您使用额外的 CSS，它们包含在 JozeAE 的答案中。
例如：
utils.toggleClass(playerContainerEl, 'player-minimize', minimize);
这需要您有一个 class、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;
}
不过，可以根据您的需要调整样式。