I am looking to display the current viewer count for youtube live streams, i can do this for youtube video with this code :
<?php
$JSON = file_get_contents("https://www.googleapis.com/youtube/v3/videos?
part=statistics&id=videiID&key=APIKey");
$json_data = json_decode($JSON, true);
echo $json_data['items'][0]['statistics']['viewCount'];
?>
but this not display the current viewers count !
UPDATE 2:
YouTube has unfortunately dropped support for this method. Hopefully there will be a new solution in the future without using their API (since it has quote limits).
Try this link: https://www.youtube.com/live_stats?v={videoid}
Find a Live event on YouTube and replace the video id in the link. This should retrieve the number of concurrent views for that particular video.
If so, refresh the page and compare the number with the concurrent viewers on the YouTube page.
UPDATE 1:
Here is an example of how you can add it to your website. You can set up a php file and a html file.
viewers.php:
<?php
$viewers = file_get_contents('https://www.youtube.com/live_stats?v=y60wDzZt8yg');
echo $viewers;
?>
viewers.html:
<!DOCTYPE html>
<html>
<body>
<div id="status" style="color: #666; line-height: 24px; font-size: 19px; font-weight: normal; font: 19px Roboto,arial,sans-serif;"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function update() {
$.ajax({
url: 'viewers.php',
dataType: 'text',
success: function(data) {
if (parseInt(data) == 0) {
$("#status").css({ display: "none" });
} else {
$("#status").text(parseInt(data) + ' watching now' );
}
}
})
}
update();
var statusIntervalId = window.setInterval(update, 5000);
</script>
</body>
</html>
As you can see, I use the PHP file to retrieve the data from YouTube using the live_stats link. I then use the HTML with jquery to update the data dynamically every 5 seconds.
<div id="status"... is where the data is shown and styled with a bit of css.
<script src="... is where the jQuery library is loaded.
<script type="... is the code function where jQuery retrieves data from the PHP file and displays it in the first div / hides it if there are 0 viewers.
I was thinking that you can embed this inside an iframe which won't refresh the entire page. You can also just embed the html code into the webpage directly without an iframe. If you will embed directly, you will have to set a direct path to the PHP file if it's not in the same relative folder. If there are any errors, just troubleshoot with the developer tools console.
Just a heads up, the number of viewers won't show until the first jQuery interval refreshes the data. In this case, 5 seconds. I updated this so it wouldn't take 5 seconds to first update. It should work right away now.
Here is an image of it working for me:
Hope this helps...
If you want to get current viewers count (concurrent viewers), just include liveStreamingDetails in the part parameter of the request.
Example:
https://www.googleapis.com/youtube/v3/videos?
part=statistics,liveStreamingDetails&id=videoID&key=APIKey
The response will include
...
"statistics": {
"viewCount": "38452",
"likeCount": "95",
"dislikeCount": "12",
"favoriteCount": "0",
"commentCount": "0"
},
"liveStreamingDetails": {
"actualStartTime": "2021-08-03T17:34:09Z",
"scheduledStartTime": "2021-08-03T16:20:00Z",
"concurrentViewers": "95",
}
...
Ref: https://developers.google.com/youtube/v3/docs/videos/list#parameters
Related
I embedded Power BI into my web page using iframe code but I would like to hide the footer with share buttons. Is there any way to achieve this?
I'm specifically talking about embed code (iframe), not public URL.
Thank you.
Typically, PowerBI returns the Iframe with it to show it was created by PowerBI, with the name embedded.
Depending on how you created it you have some options.
JavaScript with CSS to hide the footer.
If you used the UI, from the UI using this
link, as described below from the site in link
Some code to help you out: at configuration you can setup various values, and set your
footer to false
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js""></script>
<script type="text/javascript">
var embedConfiguration = {
type: 'report',
accessToken: 'someToken',
id: '71.Tykt.org',
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=xxx.TYKT.org',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
// Find the setting you want to hide and set it to False
}
};
var report;
window.onload = function () {
var $reportContainer = $('#reportContainer');
report= powerbi.embed($reportContainer.get(0), embedConfiguration);
}
</script>
<div id="reportContainer"></div>
</html>
Hope it helps!
I am trying to develop a program that will switch between url locations every 10 seconds and then loop back after going to the last url. Description below:
Display url1 for 10 sec
Display url2 for 10 sec
Display url3 for 10 sec
LOOP BACK TO URL (continuous loop)
I believe this can be done using settimeout and for loop. I do not have a complete understanding of settimeout and java for that matter so that is where I am currently stuck at. I have placed a code below but since I do not know how to use settimeout believe this is my first mistake.
If there is a better way to do this I am all ears. I have been trying java for 3 days because it needed to be do for a project at work so I am brand new to it and probably over my head.
<!DOCTYPE>
<html>
<body>
"urls"
<script>
var myurl;
function urls()
{
myurl=setTimeout(url1,0);
myurl=setTimeout(url2,10000);
myurl=setTimeout(url3,20000);
}
function url1()
{
<embed width="100%" height="100%" name=plugin src="http://files.asme.org/ICOMES/News/15876.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
function url2()
{
<embed width="100%" height="100%" name=plugin src="http://www.tbp.org/pubs/Features/Su04McMasters.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
function url3()
{
<embed width="100%" height="100%" name=plugin src="http://milproj.dc.umich.edu/publications/EngFlex_report/download/EngFlex%20Report.pdf#pagemode=none&scrollbar=0&page=2" type="application/pdf".;
}
</script>
</body>
</html>
edit:
<!DOCTYPE>
<html>
<body>
<script>
var urlList = ['http://www.google.com', 'http://www.msn.com', 'http://www.yahoo.com'];
var wnd;
var curIndex = 0; // a var to hold the current index of the current url
function openWindow(){
wnd = window.open(urlList[curIndex], '', '');
setTimeout(function () {
wnd.close(); //close current window
curIndex++; //increment the index
if(curIndex < urlList.length) openWindow(); //open the next window if the array isn't at the end
}, 2000);
}
openWindow();
</script>
</body>
</html>
It's not java. It's javascript ;)
You can do one iframe in an HTML and use javascript to change it's source every 10 seconds.
For example:
<html>
<body>
<iframe id="theIframe" src="">
</iframe>
</body>
<script>
function timeout() {
setTimeout(function () {
document.getElementById("theIframe").src= 'http://www.google.com';
timeout();
}, 10000);
}
timeout();
</script>
<html>
I am not sure this exact code will work because I just wrote it without test. But you can get the general idea. Like this every 10 seconds it will reload google. You can modify it so the websites are taken from an array or something.
Not all browsers will support opening the PDF directly in browser though. Some might want to download it - depending on plugins. If you want to render the PDF it might require external libraries.
We are using Vimeo to host corporate training videos and was wondering if there is a way using the API to trigger an event once the playback is complete?!.. We're trying to log when users have fully watched the training material.
Any suggestions welcome. Thank you in advance.
The Vimeo player fires many different javascript events. Finish is one of these events. You can find out more here : https://developer.vimeo.com/player/js-api#events
I set this up as a page on my server, and it works. Once the video player passes 3 seconds, the words You just made my function run. appear inside the tags.
I've included the full page code -- most of the javascript is from the Vimeo API example, and you wouldn't need it.
A few things I ran into - I couldn't get this to run on Jquery 1.10.X -- it looks like this may only work with jquery 1.7.2.
Also note, once the element is shown, it stays shown - so if you wanted it to hide itself again if the person rewinds the player... you'd have to build that in, probably with an "else" statement.
Last, I only tested this in Chrome, so check with your local Internet Exploder before going production.
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
</head>
<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
<p>Video status: <span class="status">...</span></p>
<p><button>Play</button> <button>Pause</button></p>
<h3 id="show"></h3><!-- thats where the message will show -->
<script>
jQuery(document).ready(function($) { // WordPress needs jquery like this...
var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause(id) {
status.text('paused');
}
function onFinish(id) {
status.text('finished');
}
function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
var time = data.seconds; //I added this var and the little if below...that's it.
if (time > 3) {
show.innerHTML = "You just made my function run."; }
}
// add an appropriate event listener
});
</script>
</html>
i am using Vimoe player.js
<script src="https://player.vimeo.com/api/player.js"></script>
and below is the code which i have also integrate onto a website to know how many logged in users watched the complete video.
player.on('ended', function(){
// Video Finished
// ajax call for custom event in WordPress
$.ajax({
url : '<?php echo admin_url("admin-ajax.php" ) ?>',
data : {
action: "create_update_user",
user_id : "<?php echo $user->ID; ?>",
post_id : "<?php echo get_the_ID(); ?>",
status : 'complete' },
dataType : "post",
type: "post",
success: function(response){
}
});
Hope it is useful because player.js is more useful instead of froogaloop2.min.js
thanks
I have a contact form in my html page .where in a iframe src with a html contactus form .once the contact us form is submitted to a thanks.php form . the out put will be the html thanks message from thanks.php file is displaying . now my requirement is after showing this thanks message for 5 seconds ,I need to reload the contactus html form again.
Please kindly help me on this
This can be accomplished with JavaScript. Set a timer for 5 seconds and set the window location to your Contact Us page. Here's how you'd do this:
<script type="text/javascript">
// Set timeout to 5 seconds, measured in milliseconds
setTimeout(function () {
window.location = "contactus.html"; // relative URL
}, 5000);
</script>
you can use this php code in thanks.php
header( "refresh:5;url=contactus.html" );
this will redirect you to contactus.html at every 5 seconds, but this won't work if you are printing thankyou message, because header() only work if there is no any output before it runs,
so now you can use javascript ,
setTimeout(function () {
window.location.href= 'http://localhost/xxx/contactus.html'; // the redirect goes here
},5000); // 5 seconds
put this script in your thankyou.php file.
UPDATE :
meta tags also can be used in thankyou.php
just put this line in <head> section
<meta http-equiv="refresh" content="5;url=http://www.yoursite.com">
I have an iframe that loads a map from CartoDB.
<iframe src='https://recology.cartodb.com/tables/condma_1_cleaned/embed_map' width='900' height='600'></iframe>
This iframe is embedded in an html presentation. When I am doing the presentation it's possible there won't be internet. In that case, it would be nice if a screenshot of the map would load instead.
How can I get a screenshot of the map to load when loading the live version fails due to lack of internet access?
Borrowing from this answer on SO you could do something like the following:
<script type="text/javascript" src="/javascripts/jquery.js"></script>
<script id="iframe_loader">
function loadIframe() {
var iframe_element = document.getElementById('iframe_id');
if (navigator.onLine) {
iframe_element.src = 'www.CartDB_url.com';
} else {
iframe_element.src = '/local_version_CartDB.htm';
}
}
</script>
And then just before you close the BODY-tag at the end of your website put in
<script>
loadIframe();
</script>