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
Related
I am designing a website to teach Inuit Sign Language, and it uses the user's camera on multiple pages for the learner to practice signing. It does not stream nor save the signal anywhere: it is only meant to show the user his or her own webcam image. In Mozilla Firefox, the first page that loads the webcam works fine, but in every webpage that uses it after that, the webcam does not work. Reloading the page does nothing (even with CTRL-F5), but closing Firefox altogether and restarting it on the same page makes the camera works... but once again, only for the first page using it.
The bug is somewhat inconsistent, it always happens locally but not always on my host server, and Microsoft Edge works just fine with it. I have no idea what to do to fix this. It's as if Firefox hadn't freed the camera when I left the first webpage or something.
An example webpage can be found here: https://animamundilarp.com/isl_training_tests/practice_inuit_people.html
Click "Next page" twice to reproduce the issue.
Thank you to anybody who can tell me what I am doing wrong.
Here is my full code for the page:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mystyle.css">
</head>
<div class="row">
<div class="col-12"><H1>Inuit People</H1></div> <!-- 100% -->
</div>
<div class="row">
<div class="col-12"><P>Please allow the website to use your webcam for this learning activity. your webcam video is not recorded or sent anywhere on the Internet, and it will only display on your own screen.</P></div> <!-- 100% -->
</div>
<div class="row"> <!-- This row includes both the video and the webcam video -->
<div class="col-6"> <!-- This contains the video of the inuit sign -->
<video controls autoplay loop muted playsinline>
<source src="videos/Inuit_people.mp4" type="video/mp4">
Your browser does not support HTML video.
</video>
</div>
<div class="col-6">
<video id="media" controls></video>
</div>
</div>
<script>
navigator.getWebcam = (navigator.getUserMedia || navigator.webKitGetUserMedia || navigator.moxGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({
// audio: true, // I keep this part of the code, but since we do not need audio, I kept it only as a comment, to reduce permissions asked by the website.
video: true
})
.then(function (stream) {
var video = document.getElementById("media");
video.srcObject = stream;
video.play();
})
.catch(function (e) {
logError(e.name + ": " + e.message);
});
} else {
navigator.getWebcam({
// audio: true, // I keep this part of the code, but since we do not need audio, I kept it only as a comment, to reduce permissions asked by the website.
video: true
},
function (stream) {
//Display the video stream in the video object
},
function () {
logError("your web cam is not accessible. If you do not have a webcam, you can use a mirror instead to see yourself signing.");
});
}
</script>
<P><button type="button" class="button_previous" onclick="Change_Page_to_Previous()"><span class="arrow_button">←</span> Previous</button> <button type="button" class="button_next" onclick="Change_Page_to_Next()">Next page <span class="arrow_button">→</span></button></P>
<script src="previous_and_next_functions.js">
</script>
You need to release the getUserMedia stream when your web page closes. How you do that is a bit of a kludge: you stop all the tracks in the stream.
(Also, all those alternative places to find the getUserMedia function are in the dustbin of history where they belong, so the code can be cleaner.)
Some Javascript code like this, not debugged, should work for you. Notice the unload event handler
const video = document.getElementById("media")
navigator.mediaDevices
.getUserMedia({ audio:false, video: true })
.then(function (stream) {
video.srcObject = stream
video.play()
window.addEventListener("unload", function(event) {
/* upon unloading do this */
const tracks = stream.getTracks()
tracks.forEach(function(track) {
track.stop()
})
video.srcObject = null
stream = null
})
})
.catch(function (e) {
logError(e.name + ": " + e.message)
})
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
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.
I need to make a HTML5 page that can display live video coming from the device's camera/webcam and that has a button that can take a snapshot; nothing fancy (similar to html5camera.com). I tried following some tutorials (http://www.html5rocks.com/en/tutorials/getusermedia/intro/ AND http://davidwalsh.name/browser-camera), but I'm still new at HTML, so I'm not sure what to do with the code snippets I find.
I copied some code into a HTML-file, but when I open it with Chrome, it says at the right in the address bar that it blocked access to the camera and microphone (without bothering to ask for permission). When I click the option to ask for permission next time and reload the page, nothing happens. There is no way to set the preferences to allow by default. I also tried Chrome Canary (same as Chrome) and Firefox (didn't ask for permission).
Did I make a mistake in the HTML? Is Chrome the problem?
The code I have so far:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = function(error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if(navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});
}, false);
</script>
</body>
</html>
You might also consider just going native. You can add native camera and camcorder support to any web app on Android, iOS or Windows Phone 8 very easily with BridgeIt: http://bridgeit.mobi. It's a simple javascript api that allows you to access native mobile features.
First off, I am quite a noob.
Ok, so I have embedded a SoundCloud track into my webpage. My question is, how do you refresh a page (or do anything else) when the track ends?
Can you do it with getDuration(I found that on SoundCloud API page)?
I tried to code it. In the code I tried to get the duration of the track and then print it on the screen/webpage. What is wrong with this code?
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<span id="headerLeft-content">
<script type="text/javascript">
var duration = 0;
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
widget.getDuration(function(val) {
duration = val;
});
});
}());
document.write(duration);
</script>
</span>
If that worked, I would just put something like wait(duration) and then refresh...
In other words, can soundcloud embedded track be "hacked" to loop(or to refresh page after track is over, that's what I want to do) even though the original widget doesn't support looping?
Please, take a look at the SoundCloud html5 widget page where I found getDuration command and see if you can help me... => http://developers.soundcloud.com/docs/api/html5-widget#getters
EDIT:
<script>
var html=<iframe blablabla...></iframe>
document.write(html);
</script>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe),
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
}());
</script>
Page doesn't refresh after the track is over. Can you see what's wrong?
You can bind a function to the SC.Widget.FINISH event documented here. The following code snippet should work:
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
Of course if all you want is for the widget to loop, you could use the seekTo and play methods:
widget.bind(SC.Widget.FINISH, function() {
// again, again!
widget.seekTo(0);
widget.play();
});
That would be less intrusive than a page refresh.
widget.bind(SC.Widget.Event.FINISH, function() {
widget.seekTo(0);
widget.play();
});
In the other reply, the first parameter is missing ".Event".
Finally. A truly working version.
var widgetIframe = document.getElementById("soundcloud"),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.FINISH, function() {
widget.play();
});