Assuming there is a media(video) player on the web page.
On Flash,
<button name="test" onclick="alert(Math.floor(jwplayer().getPosition())+ 'secs elapsed!');">elapsed time</button>
This code shows elapsed time of the video
On HTML5,
<button name="test" onclick="alert(Math.floor(document.getElementById('video').currentTime) + 'secs elapsed!');">elapsed time</button>
This code also shows elapsed time of the video
I'm thinking of storing all the comments, and it's elapsed time into Database.
Then it automatically loads all comments of particular video when the user load the page.
And then it displays each comment as elapsed time goes by(My image is pop-up)
Is it possible with jQuery(or javascript)?
If so how? Can anyone show me how to implement that easily.
if there is a comment like this
At 5 secs "hello! 5 secs has past"
At 20 secs "hello! 20 secs has past"
At 35 secs "hello! 35 secs has past"
At 35 secs "hello! 35 secs has past. part2"
At 60 secs "hello! 35 secs has past"
UPDATE:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<meta name="keywords" content="">
<meta name="description" content="">
<script type="text/javascript">
jQuery(document).ready(function () {
var comments = [{'time':'5','message':'hello! 5 secs has past'},{'time':'10','message':'hello! 10 secs has past'},{'time':'30','message':'hello! 15 secs has past'}];
$('#video').on('timeupdate',function(e){
showComments(this.currentTime);
});
function showComments(time){
var comments = findComments(time);
$.each(comments,function(i,comment){
alert(comment.message);
});
}
function findComments(time){
return $.grep(comments, function(item){
return item.time == time.toFixed();
});
}
}
</script>
</head>
<body>
<video id='video'
controls preload='none'
poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id='mp4'
src="http://media.w3.org/2010/05/sintel/trailer.mp4"
type='video/mp4'>
<source id='webm'
src="http://media.w3.org/2010/05/sintel/trailer.webm"
type='video/webm'>
<source id='ogv'
src="http://media.w3.org/2010/05/sintel/trailer.ogv"
type='video/ogg'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
</body></html>
Here's some sample code you can use as a starting point, it is using the HTML5 Javascript API
Demo fiddle
//Store your comments in an array as objects with time and message
var comments = [{'time':'5','message':'hello! 5 secs has past'},{'time':'10','message':'hello! 10 secs has past'},{'time':'15','message':'hello! 15 secs has past'}];
//Bind to the timeupdate event
$('#video').on('timeupdate',function(e){
showComments(this.currentTime);
});
//show your comments
function showComments(time){
var comments = findComments(time);
$.each(comments,function(i,comment){
alert(comment.message);
});
}
//find all comments for the current time
function findComments(time){
return $.grep(comments, function(item){
return item.time == time.toFixed(); //Remove decimals to check for whole seconds
});
}
You can read more about the video API here
Also, I should note that the timeupdate event is fired at different intervals in different browsers, check this question for more info.
If you dont have many comments per video, load all the comments at once from the database...put it in a javascript array...and then use a timer to display one by one.
To put the database query results in javascript array you can implement ajax.
If you have many comments per video you have to make an ajax call to retrive a single comment each time the timer event fires, and then show it.
For javascript and jquery procedure is really the same, but in jquery ajax code is lot lot simpler.
Related
I am trying to see a video using Chrome. In particular, I would like to add some useful commands to it, such as a countdown element. This is my code:
<html>
<head>
<meta name="viewport" content="width=device-width">
<script>
var video = document.getElementById('video');
video.addEventListener('timeupdate', updateCountdown);
function updateCountdown() {
var timeSpan = document.querySelector('#countdown');
timeSpan.innerText = video.duration - video.currentTime;
}
</script>
</head>
<body>
<video id="video" controls="" autoplay="" name="media"><source src="file://..........." type="video/mp4"></video>
<div style="color:RED;" id="countdown">Video ends after <span id="countdown">xx</span> seconds.</div>
</body>
</html>
I would like it to show how much time is left, but it is not working. How can I fix it?
And how can I make it ring every time 5 minutes of the video have passed?
Thank you very much in advance
You have not given your video element an id so the getElementById can't find it. There must be some errors on your browser's dev tools console, do you see them?
To time the 5 minutes you could use a setTimeout function and get it to call a function that creates a sound.
(1) Create your HTML elements first so they are existing when using Javascript to control them.
<html>
<head> <meta name="viewport" content="width=device-width"> </head>
<body>
<video id="myVideo" name="media" controls autoplay>
<source src="file://..........." type="video/mp4"></video>
<div style="color:RED;" id="countdown">Video ends after <span id="countNumbers"> xx </span> seconds.</div>
</body>
<script>
var vid = document.getElementById("myVideo");
vid.addEventListener("timeupdate", updateCountdown, true);
var timeSpan = document.getElementById("countNumbers"); //# was document.querySelector('#countdown');
function updateCountdown()
{ timeSpan.innerText = Math.round(vid.duration - vid.currentTime); }
</script>
</html>
(2) For sound every 5 minutes, remember JS is counting in millisecs (eg 1 second is 1000 ms, so you need a value of 60,000 x 5 to represent 5 mins). So you need logic like the below example.
if( video.currentTime >= (lastTime + five_mins) )
{
//# update new "lastTime" to start from here onwards
//alert(" 5 mins have passed ... ");
lastTime = video.currentTime;
soundFile.play; //# play the audio tag by its ID
}
PS: Your idea might break if user seeks the video etc, so if you just want a timer that plays a sound every 5 mins regardless of .currentTime then use either settimeout or setinterval...
Try adding a html countdown and sync it with the "Video ends after xx seconds" text. If that doesnt work then try doing something like Youtube's countdown thing (if you can inspect the element code and find the right code) you can do it!
I need to open 192.168.1.1 every couple of minutes. I have the following code but doesn't work:
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<script>
setInterval(function() {
location.replace("http://192.168.1.1")
}, 60 * 1000);
</script>
</body>
</html>
Adding to the iframe solution, in case you want it to open in a new tab
<script>
var URL = "http://example.com";
setInterval(function() {
var win = window.open(URL, "_blank");
/* uncomment if you want it to close
setInterval(function() {
win.close()
}, 1500);
*/
}, 2000);
</script>
like the iframe, not replacing the current tab ensures your code keeps running.
Your code won't work as you want it to, because once you change the location for the first time, it will load the router site and your code won't be executed anymore.
Since you can't control the router page code, you can load the router website into an iframe:
<iframe src="http://192.168.1.1"></iframe>
and put this in your <head> to refresh the site every 300 seconds:
<meta http-equiv="Refresh" content="300">
(adjust the number of seconds to your needs)
Sorry for poor title.
I basically want to start a countdown (5 minutes) if a certain thing reports back witha number. Most of the backend is in PHP but I want to animate to the countdown so the user can see (maybe even with a progress bar eventually). But once the countdown his zero, if the condition is not met I want it to, lets say refresh the page for simplicity.
I'm looking for some guidance in right guidance. Should I:
Run timers seperately in JS and PHP
or
Do something like this Countdown timer built on PHP and jQuery? with a common php file included or something along those lines
Thanks guys.
well if you want a timer triggered by something that reports to the backend when it its over you could just do an ajax request with JQuery. I will try to explain it based on the condition that PHP has to init the counter as you show to us at the example timer.
Add JQuery to your project Download it here
Download JQuery countdown here, also you can read more about the library here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="./jquery.countdown-2.2.0/jquery.countdown.min.js"></script>
</head>
<body>
<div class="countdown">
<span id="clock"></span>
</div>
<script>
function initTimer()
{
<?php
date_default_timezone_set('America/Bogota'); //Your target timezone
$time = new DateTime();
$minutes_to_add = 5;
$time->add(new DateInterval('PT' . $minutes_to_add . 'M'));
?>
$('#clock').countdown('<?php echo $time->format('Y-m-d H:i:s'); ?>')//so we init the timer at te server time + 5 minutes
.on('update.countdown', function(event) {
var format = '%H:%M:%S';
$(this).html(event.strftime(format));
})
.on('finish.countdown', function(event) {
$(this).html('This offer has expired!')
.parent().addClass('disabled');
//at the end of the timer we will send data to the server
$.ajax({
url: "your_server_service_url",
method: "GET",
data: {"some":"data you want to sent to server"}
}).done(function(r){ // r is the response from your server (all text printed)
location.reload(); //After the server get the data we reload the current page.
});
});
}
initTimer();
</script>
</body>
</html>
I am helping a friend make a website and am a novice with javascript so could do with a little help. I have researched on here and see that some similar questions have been asked before but would like to know exactly how to relate this back to my code. So far this code works well, when you load up the homepage, the video clip runs IF the window is wider than 600px, but the video clip doesn't run if the window is less than 600 pixels. Also the other javascript makes the video disappear once it's played. However the problem I have is if you go to another page on the site, and then back to the home page, the video plays again and again, but I want the video to play only once when the visitor arrives to the site. Could anyone advise how I would edit the code so that the video only runs once per visit? All relevant code is below:
<script type="text/javascript">
window.addEventListener('load', function() {
if (window.innerWidth >= 600) {
var vid = document.getElementById('video');
var wrap = document.getElementById('videowrapper');
wrap.classList.toggle('hide');
vid.play();
vid.addEventListener('ended',function(e) {
wrap.classList.toggle('hide');
});
}
})
</script>
<div id="videowrapper" class="hide">
<video id="video" controls>
<source src="clip.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div id="videoEnd" style="display:block">Chris Presents</div>
</div>
<script>
document.getElementById('video').addEventListener('ended',myHandler,false);
function myHandler(e) {
if(!e) { e = window.event; }
// What you want to do after the event
document.getElementById('video').style.display="none";
document.getElementById('videoEnd').style.display="none";
}
</script>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="oldhomestyle.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="soundmouseover.js"></script>
</head>
Not sure what is this code doing in your tag! (the divs)
Other than that, as mentioned, you could definitely use cookies for what you need.
You can set localStorage to store value representing if video has been played at ended event, read localStorage at load event of window
window.addEventListener('load', function() {
if (window.innerWidth >= 600 && localStorage.getItem("played") === null) {
var vid = document.getElementById('video');
var wrap = document.getElementById('videowrapper');
wrap.classList.toggle('hide');
vid.play();
vid.addEventListener('ended', function(e) {
wrap.classList.toggle('hide');
localStorage.setItem("played", true)
});
}
})
I am trying to create a live "video" stream using an tag on a web page.
A Gstreamer pipeline continually overwrites a file "snapshot.jpeg" with a new frame grabbed from a webcam using video4linux2 with a framerate of 15 fps.
A web page renders the image without caching every 100 ms.
The problem is that I get ERR_CONTENT_LENGTH_MISMATCH (in browser console) for the image source on many frames. This is shown as a broken link in the browser.
GStreamer 0.10 syntax
gst-launch v4l2src ! video/x-raw-yuv, width=640, height=480, framerate=15/1 ! jpegenc ! multifilesink location=/var/www/video/snapshot.jpeg
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<img id="snapshot" src="snapshot.jpeg"/>
</body>
</html>
JavaScript
$(function() {
function refreshImage(){
$("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
setTimeout(refreshImage, 100);
}
refreshImage();
})
Try to hook setTimeout to Image.onload:
$(function() {
function refreshImage(){
$("#snapshot").attr("src", 'snapshot.jpeg?' + Math.random());
}
$("#snapshot").onload = function(){
setTimeout(refreshImage, 100);
}
refreshImage();
})