I am trying to find if there is any way in youtube frame API that we get notified when users try to skip the video and prevent it.
My code
function onYouTubePlayerAPIReady() {
player = new YT.Player("ytplayer", {
height: "360",
width: "640",
videoId: getQueryStringParam("videoID"),
events: {
onReady: onPlayerReady,
onStateChange: onPlayerStateChange,
onPlaybackQualityChange: onPlaybackQualityChange,
onPlaybackRateChange: onPlaybackRateChange,
onError: onError,
onApiChange: onApiChange,
},
});
}
its an example i want you to focus on events part of that code there is onStateChange which notified me when video is paused or started and code for onStateChange is
function onPlayerStateChange(event) {
switch (event.data) {
case YT.PlayerState.ENDED:
console.log('ended')
break;
case YT.PlayerState.PLAYING:
console.log("playing....");
break;
case YT.PlayerState.PAUSED:
console.log("paused....");
break;
}
}
so i want something like this when user try to skip video and then prevent it from hapening.
Youtube API does not have a listener for skip or seek. You will need to write some custom code. One way to do it is to create an interval of 1sec or more and check the difference between play times.
What I instead chose to do for flexibility is use a different progress bar and attach events from progress bar to the player. This way you can control player much better.
Also, you can completely disable controls on Yt player by using:
playerVars: { 'controls': 0 }
Check out this issue for more details on implementation:
How to listen to seek event in youtube embed api
Related
I am creating an app using Angular 4, that should receive push notifications from time to time. I have managed to make the notification appear, but I wasn't able to customize its styles and its content.
What I am looking for is a way to change the background color of my notifications so that I can make them blink to call the user's attention.
Here is my code:
public showNotification(title: string, text: string): Notification {
// Check if notifications are supported
const notificationOptions = {
body: `<div style="color:red"><p>${text}</p></div>`,
icon: 'assets/img/logo_onyo-simples.png',
badge: 'assets/img/logo_onyo-simples.png',
vibrate: [200, 100, 200]
};
try {
// Throws an exception if the browser doesn't support a notification.
const notification = new Notification(title, notificationOptions);
notification.onclick = (e: any) => {
window.focus();
notification.close();
};
return notification;
}
catch (e) {
if (e.name === 'TypeError') {
this.raven.captureBreadcrum({
message: 'This browser does not support notifications',
level: 'warning',
category: 'notification'
});
}
else {
this.raven.captureException(e);
throw e;
}
}
}
I've tried to add a test HTML tag to the notification body, but that didn't work. Is there a way to do this?
Note: the reason because I am not using Toastr notifications is because I want the user to receive my notifications even if the browser is minimized or behind another application.
Note 2: here is an example of the type of notification that I am using: https://tests.peter.sh/notification-generator/.
I believe that what you're trying to do is not possible, at least according to the spec. There are no properties nor methods for passing / setting of visual presentation.
I'm speculating here, but it could be because browser vendors want to prevent exactly the type of behavior you're trying to create. Maybe you can style a notification with good taste and design. However, this would also open the door to people creating bad, annoying and straight up predatory notifications. It would open the door to dark patterns.
Although, it's possible that this kind of stylistic flexibility will be added in the future. I just don't think so.
I'm working with the Youtube Javascript API (iframe version) and I'm using start and end parameters in order to play a portion only of a video. While everything works fine, once the end is reach, the player stop (normal behavior). However, when clicking again on play, the player does not seems to considering the start option. It always restart playing from the beginning of the video. It ends however at the defined end value, always.
<iframe frameborder="0" src="https://www.youtube.com/embed/5lGoQhFb4NM?autoplay=1&autohide=1&modestbranding=1&showinfo=0&controls=0&vq=hd720&rel=0&start=60&end=100" style="width: 100%; height: 400px;"></iframe>
Do you guys have any idea on why it is happening?
Here's how I was able to have the replay button start over at the original start time, as well as prevent users from scrolling outside the start/end bounds of the playerVars:
function onPlayerStateChange(event) {
var isClip = playerOptions.playerVars.start && playerOptions.playerVars.end;
var start = isClip ? playerOptions.playerVars.start : null;
var end = isClip ? playerOptions.playerVars.end : null;
if (event.data == YT.PlayerState.PLAYING) {
if (isClip) {
var currentTime = event.target.getCurrentTime();
if (currentTime < start || currentTime > end) {
event.target.seekTo(playerOptions.playerVars.start);
}
}
}
}
I've tried the above solution without succes (error console : "playerOptions is not defined")
But thx to this topic YouTube API - Loop video between set start and end times I've been able to successfully get the start/end parameters on replay :
<script>
// 5. The API calls this function when the player's state changes.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
var playButton = document.getElementById("play");
playButton.addEventListener("click", function() {
player.loadVideoById({
videoId: videoId,
startSeconds: startSeconds,
endSeconds: endSeconds
});
});
document.getElementById("play").style.cssText = "visibility:visible";
}
}
</script>
Explanations : in my case, I'm using a button id="play" to start the video. When the video is ENDED, the button #play is set to visibility:visible and the click event uses the player.loadVideoById corresponding parameters.
If you don't use the click event, the video will auto loop with the desired start/end values.
From Youtube API reference = https://developers.google.com/youtube/iframe_api_reference?hl=fr#Getting_Started
I'm using both Google Analytics and branch.io in this website.
The website is designed for mobile.
The problem is that when clicking the banner with text "OPEN", the app cannot be opened.
Here is the code for the click:
$scope.openApp = () => {
let appOpened = false;
const open = () => {
if (!appOpened) {
appOpened = true;
branch.deepviewCta();
}
};
$timeout(open, 1000);
ga('send', 'event', 'homepage', 'download', {
hitCallback() {
open();
}
});
};
If I get rid of the GA code, it works fine:
$scope.openApp = () => {
let appOpened = false;
const open = () => {
if (!appOpened) {
appOpened = true;
branch.deepviewCta();
}
};
$timeout(open, 1000);
open();
};
The reason I put open() in hitCallback is to make sure GA sends out the hit because open() will redirect to another page.
Can you help me?
Alex from Branch.io here:
The Branch deepviewCta() function works on iOS 9+ by triggering an automatic redirect to a Universal Link URL (which opens the app) and then going to a fallback URL if that fails. But Apple is very specific about the situations in which a Universal Link is allowed to launch the app (including things like how long of a pause is allowed before redirection). Of course these restrictions are not public, so all we can do is guess. My suspicion is that putting the deepviewCta() function inside a GA callback is falling outside of Apple’s rules, so the app never opens and you are instead being sent to the fallback URL.
I can think of two options here:
You can build some way to trigger the GA and Branch functions separately so that they don’t conflict with Apple’s requirements.
We actually have a brand new, one-click integration with Google Analytics, which you can read about here and here. If you set that up, you’ll get all Branch-related events automatically instead of needing to manually collect link click data.
Hopefully that helps!
I've found the FlowRouter documentation for FlowRouter.reload(), but I've been unable to find specific code examples and can't get it working.
In my app, I have a template that uses some clever javascript (Isotope) to reposition elements as the page resizes. Sometimes the user navigates away, resizes the browser window, and then returns - to a messed up page that should refresh and redraw to reposition the elements for the re-sized window.
This is my route. How would I use FlowRouter.reload() to reload/refresh just the "work" template area? Alternatively, how would I use it to reload/refresh the whole layout template or window?
FlowRouter.route( '/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
});
In case anyone else comes here, this was solved with a great help from Hugh in the Meteor forum.
The solution did not use reload. Instead, it made use of Triggers in FlowRouter to check if the template was being reloaded, refresh it if so, and then stop once refreshed to prevent an endless loop.
Here is how it worked out.
// handle refreshing div on every load of div
let fireReload = false;
function reloadCheck(context, redirect, stop) {
if (fireReload) {
console.log('Hugh is Awesome and also reloading screen...');
FlowRouter.reload();
stop();
}
}
function routeCleanup() {
fireReload = !fireReload;
}
FlowRouter.route('/work', {
action: function() {
BlazeLayout.render( 'body-static', {
content: 'work',
});
},
triggersEnter: [reloadCheck],
triggersExit: [routeCleanup]
});
I'm using popupMode: true on my Sign In page, and have a signInSuccess callback function on my Widget page:
var config = {
...
callbacks: {
signInSuccess: function(tokenString, accountInfo,
opt_signInSuccessUrl) {
console.log(JSON.stringify(accountInfo));
return true;
}
},
...
}
My function gets called, and the user gets signed-in in the original window, but the widget popup window does not close.
Is this a defect or am I missing something?
Yeah this behavior has been changed for popups when signInSuccess is provided. There were problems with the old behavior. The idea here is that when callback is provided, the developer wants to handle that on their own. The page is still closed automatically when no callback is provided. In your case you will need to close manually.
You can add this snippet before you return true:
if (window.opener) {
window.close();
}