JWPlayer Now Playing - javascript

I'm trying to trigger JW Player to display the current item (now playing). Unfortunately I can't get it to work. Getting an error:
[Error] TypeError: undefined is not an object (evaluating 'G.length')
This is my code:
<head>
<style type="text/css">
body {
background-color: #000;
}
.jwrapbuttons {
max-width: 330px;
margin: 0 auto;
}
.jwbutton {
font-weight: bold;
font-size: 26px;
padding: 10px 30px;
border: 2px solid #ff0000;
color: #ff0000;
display: inline-block;
text-decoration: none;
margin: 50px 10px;
background: rgba(255, 0, 0, 0.3);
}
.videobgelement {
position: fixed !important;
z-index: -1;
top: 0;
left: 0;
}
</style>
</head>
<script src="jwplayer/jwplayer.js"></script>
<script type="text/javascript">jwplayer.key="m7vmXLZ0enrVLb+YYgi5ov3fLyu1cuUO06mN3bduBFQsvJceYFThIWkoGOmfvZPm";</script>
<div id="player"></div>
<script type="text/javascript">
jwplayer('player').setup({
width: "100%",
height: "100%",
playlist: "playlist.jw5.rss",
plugins: {
'../jwplayer.shuffle.js': {
autostart: true,
repeatplaylist: true,
shuffle: true
}
}
});
jwplayer('player').addButton("shuffle.png", "Shuffle", function() {
shuffle_setShuffle();
}, "jwplayer-shuffle");
jwplayer('player').addButton("repeat.png", "Repeat", function() {
shuffle_setRepeatPlaylist();
}, "jwplayer-repeat");
var current = jwplayer().getPlaylistItem();
console.log(current);
</script>
</script>
</div>
I know it is a bit messy, but I'm wondering: where did I go wrong? What should I define so it'll work?
Riccardo

Fixed it: firing an alert instead of just randomly. Also: getPlaylistItem is not supported in old versions of JW Player. It's supported in 6.5 and above.

Related

Stop Loop Property in wavesurfer.js

I'm using wavesurfer.js in my new project. (Source Link)
It has some methods to use for backward/forward in the media player.
Methods : skip(), skipBackward(), skipForward()
The problem is when you are using skip()/skipForward() in last moments, before the media finish, it starts again from the beginning. I need to stop playing at the end. I don't want that loop property. I have searched the documentation. Nothing there also. It doesn't have a loop option to make it false!
Documentation Page : https://wavesurfer-js.org/docs/
This is my code:
(Try it on localhost because of CORS Policy: No Access-Control-Allow-Origin error)
// WaveSurfer Create Method
var WaveSurferElement = WaveSurfer.create({
container: '#wavesurfer',
waveColor: '#000068',
progressColor: '#9f5000',
skipLength: 5,
cursorWidth: 2,
barWidth: 3,
barRadius: 3,
barGap: 3,
});
// WaveSurfer Load Method
WaveSurferElement.load('../files/example.mp3');
// WaveSurfer Ready Event
WaveSurferElement.on('ready', function () {
// Enable Buttons
$('#play-btn,#forward-btn,#backward-btn').prop('disabled', false);
});
// WaveSurfer Play Event
WaveSurferElement.on('play', function () {
$('#play-btn').find('.icon').removeClass('fa-play').addClass('fa-pause');
$('#play-btn').attr('title', 'Pause');
$('#play-btn').attr('id', 'pause-btn');
});
// WaveSurfer Pause Event
WaveSurferElement.on('pause', function () {
$('#pause-btn').find('.icon').removeClass('fa-pause').addClass('fa-play');
$('#pause-btn').attr('title', 'Play');
$('#pause-btn').attr('id', 'play-btn');
});
// Play Button Action
$(document).on('click', '#play-btn', function () {
WaveSurferElement.play();
});
// Pause Button Action
$(document).on('click', '#pause-btn', function () {
WaveSurferElement.pause();
});
// Forward Button Action
$(document).on('click', '#forward-btn', function () {
WaveSurferElement.skipForward();
});
// Backward Button Action
$(document).on('click', '#backward-btn', function () {
WaveSurferElement.skipBackward();
});
body {
direction: rtl;
}
.player-section {
position: relative;
width: 500px;
height: 350px;
background: linear-gradient(180deg, #000000 0%, #ff8100 50%, #000000 100%);
margin: 20px auto;
padding: 10px;
border-radius: 8px;
}
.player-section .player {
position: absolute;
left: 0;
right: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgb(255 255 255 / 70%);
border-radius: 8px;
}
.player-section .player,
.player-section .action {
box-shadow: 0 0 3px 0 #000000;
}
.player-section .player .wavesurfer {
margin-top: 90px;
}
.player-section .action {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
text-align: center;
background-color: rgb(0 0 0 / 70%);
border-radius: 0 0 8px 8px;
}
.player-section .action .btn {
width: 150px;
height: 40px;
background-color: white;
font-family: Arial;
font-size: 18px;
border: 0;
margin: 10px 5px;
border-radius: 8px;
text-transform: uppercase;
}
.player-section .action .btn.play-btn {
width: 40px;
border-radius: 3px;
}
.player-section .action .btn.forward-btn .icon {
margin-left: 3px;
}
.player-section .action .btn.backward-btn .icon {
margin-right: 3px;
}
.player-section .action .btn:hover {
opacity: 80%;
cursor: pointer;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WAVESURFER.JS</title>
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
<!--/Styles -->
</head>
<body>
<div class="player-section">
<div class="player">
<div class="wavesurfer" id="wavesurfer"></div>
</div>
<div class="action">
<button class="btn forward-btn" id="forward-btn" title="Forward" disabled>
<i class="icon fa-solid fa-forward-fast"></i><span>Forward</span>
</button>
<button class="btn play-btn" id="play-btn" title="Play" disabled>
<i class="icon fa-solid fa-play"></i>
</button>
<button class="btn backward-btn" id="backward-btn" title="Backward" disabled>
<span>Backward</span><i class="icon fa-solid fa-backward-fast"></i>
</button>
</div>
</div>
<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/6.2.0/wavesurfer.min.js"></script>
<!--/Scripts -->
</body>
</html>
As I said, the problem is when media is about to finish, Example:
Wavesurfer On Playing
And you click on Forward Button, It jumps to first of the media) Example: Wavesurfer After Forward
So in this situation, I wanna pause the media & keep the playing cursor at the end. (Or just stop it) I don't need the loop. What can I do ?!

change bPopup options dynamically to disable/enable following

I'm using a jQuery plugin called bPopup , which receives a jQuery object and creates a popup element.
it is constructed using an options element that looks like this:
{
modalClose: false,
modalColor: "#ffffff",
follow: [false, false] // Follow x, follow y
}
I want to change the "follow" property within the popup dynamically, without re-creating the popup or cloning it, but actually changing the existing popup.
in other words: I want the popup to follow when scrolling, and be able to pause that following when desired.
A fiddle displaying the problem:
https://jsfiddle.net/syoels/9tqcaq7m/11/
Thanks a lot in advance!
Ok. It was much simpler than I thought...
just find the popped up div, address it's 'bPopup' data attribute and change the follow property.
Working fiddle with the solution: https://jsfiddle.net/syoels/ydu5s9zu/
$(document).ready(function() {
$('#popupBtn').click(function() {
var popup_div = $('<div id="popup"><p>Holy guacamole! what a gorgeous popup!<br><br>scroll down and see if it follows you</p> <button id="stopFollowingBtn">Toggle follow</button></div>');
popup_div.bPopup({
follow: [true, true], //x, y
opacity: 0.6,
modalColor: 'greenYellow',
});
$('#stopFollowingBtn').click(function() {
var follow_x = $('#popup').data('bPopup').follow[0];
var follow_y = $('#popup').data('bPopup').follow[1];
$('#popup').data('bPopup').follow = [!follow_x, !follow_y];
});
});
});
body {
background: black;
height: 1000px;
}
#popup {
display: none;
position: absolute;
width: 140px;
height: 200px;
background: #ccc;
text-align: center;
border: 2px solid white;
border-radius: 3px;
box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
}
#popupBtn {
display: block;
margin: 10px auto;
}
#stopFollowingBtn {
background: red;
color: white;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bPopup/0.11.0/jquery.bpopup.js"></script>
<body>
<button id="popupBtn">show popup</button>
</body>

Simple Cookie Bar Notice

I am using the script from http://cookie-bar.eu/ but for some reason when I set the script to be shown on top of the page, after you dismiss the Cookie Notice, the text from the top of the page is truncated. You can see here how Hello disappears or is truncated:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>cookieBAR</title>
<script type="text/javascript">
var expirationDate = new Date();
expirationDate.setDate(128);
document.cookie = "dummy=1; expires="+expirationDate.toUTCString()+"; path=/";
</script>
</head>
<body>
<h1>Demo</h1>
<script type="text/javascript" src="//cdn.jsdelivr.net/cookie-bar/1/cookiebar-latest.js?forceLang=EN&top=1"></script>
</body>
</html>
Any ideas?
Solved by the developer with a new version.
The same approach can be achieved easily by using the code below.
Styles: Add the following code to your HTML <head></head> section.
<style>
#cookie-notice {
display: none;
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 999;
max-width: 450px;
margin: auto;
padding: 0.5rem;
border: 1px solid #eee;
background-color: #fefefe;
box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.05);
font-family: Arial, Helvetica, sans-serif;
line-height: 22px;
font-size: 15px;
text-align: center;
color: #555;
}
.cookie-notice-more {
margin: 0 0.25rem;
text-decoration-style: dashed;
color: inherit;
}
.cookie-notice-close {
padding: 0 0.5rem;
border: 1px solid #ddd;
border-radius: 0.125rem;
line-height: 20px;
text-decoration: none;
color: #888;
}
#media only screen and (min-width: 768px) {
#cookie-notice {
bottom: 1rem;
border-radius: 0.25rem;
}
.cookie-notice-close {
float: right;
}
}
</style>
Notice block: Add the following code to your HTML <body></body> section.
<div id="cookie-notice">
We use cookies to deliver better experience.
More info...
OK
</div>
Script: Add the following code to your HTML footer before the </body> closing tag.
function closeCookieNotice() {
const nowDate = new Date();
const expireDate = new Date(nowDate.setDate(nowDate.getDate() + 30)).toUTCString();
document.cookie = "cookie_notice=0;path=/;expires=" + expireDate + ";";
document.getElementById("cookie-notice").style.display = "none";
};
document.addEventListener("DOMContentLoaded", function() {
const cookie_notice = ('; ' + document.cookie).split('; cookie_notice=').pop().split(';')[0];
if (cookie_notice !== "0") {
document.getElementById("cookie-notice").style.display = "block";
}
});
</script>
Source code, include files, 1-file script install & themes available here: https://cookienotice.js.org

Disallow Interaction With Website During Animations

I am attempting to write some javascript that will create textareas and when you click on a textarea to begin typing it grows and centers in the window until you click off of it where it shrinks back down.
Easy enough, until I wanted to add the .animate() and suddenly I have some serious problems that I am pouring too much time into trying to figure out.
While running some quality assurance I discovered a number of bugs...
-If I drop focus on the textarea that is animating its growth while it is still animating then the .blur() function fails to call.
-If I shift focus to another textarea while the first is still animating
then both may remain large failing to call the .blur() function.
-Finally there is just some really strange activity with the centering feature. .scrollTo() and .animate() perform poorly together especially when there are many textareas or I am picking a box that in the midst of many.
Is there a way to disallow any interaction with the website while an animation plays out?
Any ideas on how to remedy any of these issues?
the javascript... boxy.js
Code:
function growthearea() {
$('textarea.textfield').blur(function(){
$(this).animate({ height: "51" }, 500); //shrink the current box when lose focus
//$(this).height(51);
});
$('textarea.textfield').focus(function(){
$("*").off("focus,blur,click"); //turn off focus,blur,click while animating
var wheretoY = $(this).offset().top-73;
window.scrollTo(17,wheretoY);
// turn back on focus,blur,click after animation completes
$(this).animate({ height: "409" }, 1000, function(){("*").on("focus,blur,click")});
//$(this).height(409);
});
}
function newboxbtn()
{
var btn=document.createElement("textarea");
btn.setAttribute('class','textfield');
var textlocale = document.getElementById('locale');
textlocale.appendChild(btn);
$('textarea.textfield').on('keyup change', function() {
$('p.display').text('You are typing: ' + $(this).val()); //live update from focused textarea
});
growthearea(); //recall function for any new boxes to be acknowledged
};
function jsinit()
{
$('textarea.textfield').on('keyup change', function() {
$('p.display').text('You are typing: ' + $(this).val()); //live update from focused textarea
});
growthearea(); //call function for initial group of boxes
}
the html... boxy.htm
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="sty.css" />
<script src="./jquery.js"></script>
<script src="./boxy.js"></script>
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "fast" );
});
jsinit();
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<div class="grid">
<div class="col-left" id="left">
<div class="module" id="scrollingDiv">
<input type="button" value="add" onclick="newboxbtn()" />
<p class="display">you are typing </p>
</div>
</div> <!--div class="col-left"-->
<div class="col-midd">
<div class="module" id="locale">
<textarea class="textfield" placeholder="begin typing here..." ></textarea>
<textarea class="textfield" placeholder="begin typing here..."></textarea>
</div>
</div> <!--div class="col-midd"-->
</div> <!--div class="grid"-->
</body>
</html>
the css... sty.css
Code:
.textfield {
width: 97%;
height: 51;
resize: none;
outline: none;
border: none;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px 1px #0044FF;*/
}
.textfielded {
width: 97%;
resize: none;
outline: none;
border: none;
overflow: auto;
position: relative;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
font-size: 70%;
background: white;
/* box-shadow: 1px 2px 7px #FFDD00;*/
}
/*#postcomp {
width: 500px;
}*/
* {
#include box-sizing(border-box);
}
$pad: 20px;
.grid {
background: white;
margin: 0 0 $pad 0;
&:after {
/* Or #extend clearfix */
content: "";
display: table;
clear: both;
}
}
[class*='col-'] {
float: left;
padding-right: $pad;
.grid &:last-of-type {
padding-right: 0;
}
}
.col-left {
width: 13%;
}
.col-midd {
width: 43%;
}
.col-rght {
width: 43%;
}
.module {
padding: $pad;
}
/* Opt-in outside padding */
.grid-pad {
padding: $pad 0 $pad $pad;
[class*='col-']:last-of-type {
padding-right: $pad;
}
}
body {
padding: 10px 50px 200px;
background: #001235;
}
h1 {
color: black;
font-size: 11px;
font-family: "Lucida Console", Monaco, monospace;
font-weight: 100;
}
p {
color: white;
}
To check if something is animated: { quite weird for sure! }
if($('*').is(':animated').length) return;

Optimize jQuery code

I've written this jQuery code that fades in a overlay with some links over an image. What i found out is that it is painfully slow when I add like 10 of these images. I would really appreciate some tips and tricks on how to make this code faster.
If you have some tips for my HTML and CSS that would be great too ;)
jQuery code
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
All the code
<style type="text/css">
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
img {
border: none;
}
#backgrounds {
font: 82.5% "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 50px 0 0 0;
padding: 0;
width: 585px;
}
.thumb {
margin: 5px;
position: relative;
float: left;
}
.thumb img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.thumb div {
display: none;
}
.thumb .download {
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0 10px;
}
.thumb .download h3 {
font-size: 14px;
margin-bottom: 10px;
margin-top: 13px;
text-align: center;
}
.thumb .download a {
font-size: 11px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 16px;
}
.thumb .download a:hover {
text-decoration: underline;
}
.thumb .download .left, .thumb .download .right {
width: 44%;
margin: 0;
padding: 4px;
}
.thumb .download .left {
float: left;
text-align: right;
}
.thumb .download .right {
float: right;
text-align: left;
}
.thumb img, .thumb .hud {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.thumb .hud {
width: 100%;
height: 110px;
position: absolute;
top: 0;
left: 0;
background: #000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
</script>
<div id="backgrounds">
<div class="thumb">
<div class="download">
<h3>Download wallpaper</h3>
<p class="left">
1024x768
1280x800
1280x1024
</p>
<p class="right">
1440x900
1680x1050
1920x1200
</p>
</div>
<div class="hud"></div>
<img alt="image" src="thumb.jpg"/>
</div>
</div>
I got it to respond a little better by simply changing the following within the hover(..):
function () {
$(".download", this).fadeTo("fast", 1);
$(".hud", this).fadeTo("fast", 0.7);
},
function () {
$(".download, .hud", this).fadeTo("fast", 0);
}
The biggest difference comes from only applying the hoverout effect to the event target, no need to reapply to all your divs on the page.
I've put your code into a test page and to be perfectly honest, even with thirty or so .thumb divs it seemed ok - certainly responsive enough to use from my end. Sliding the mouse over a bunch of them means I have to wait for the rollover effect to go through them all which takes a while until it gets to the one I've actually stopped on, but surely that was what you wanted given that you're using 'hover' rather than 'click' (which would certainly remove any speed issues).
I'm not using actual images in my test page, just getting the alt text, so my best current guess would be to make sure all images you're loading are as small filesize as you can possibly make them.
Pre-Select MORE
Good job preselecting the div. Try this way so that it pre-selects the fade in elements as well instead of doing it on hover:
$().ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").each(function() {
var download = $(this).children(".download");
var hud = $(this).children(".hud");
$(this).hover(
function () {
download.fadeTo("fast", 1);
hud.fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
});
try removing the
:focus {
-moz-outline-style:none;
}
and see what happens

Categories