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!
Related
After too many hours on YT and Google, I'm here. Thanks for taking the time to read & help. :)
I'm trying to make it so that when the mouse hovers over the image, an audio snippet plays automatically. I've tried a few different things, but this is where I stopped.
Can't seem to get anything to work.
HTML file snippet
<head>
<link rel="stylesheet" href="./stylesheet.css">
<script type="text/javascript" src="./scripts.js"></script>
...other stuff etc etc
<div class="deviruchi" data-tooltip="no touchy!">
<audio id="devi">
<source src="./sounds/deviruchi_idle.mp3">
<source src="./sounds/deviruchi_idle.ogg">
</audio>
<img src="./images/deviruchi.gif">
</div>
Javascript file
let deviruchi = $("#devi")[0];
$(".deviruchi").onmouseenter(function () {
deviruchi.play();
});
Thanks again! :)
Probably because you are using jquery...(j/k, but no really)
Make sure that the audio files are present on the server, check devtools for error messages (javascript as well as network)
Also, user must first interact with the webpage (click/focus, etc) before browser will allow play media files.
hoverMe.addEventListener("mouseenter", e =>
{
myAudio.play().catch(er => console.error(er.message, "Now, click here and try again"));
});
hoverMe.addEventListener("mouseleave", e =>
{
myAudio.pause();
});
<div id="hoverMe">Hover over here</div>
<audio id="myAudio" src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3"></audio>
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)
});
}
})
When I update a file on my server the html page automatically changes the html page (checks every 9 seconds for changes).
How can I trigger a chime sound file to alert a user of a html page change?
Here is the html:
<html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("data.txt");
var refreshId = setInterval(function() {
$("#responsecontainer").load('data.txt?randval='+ Math.random());
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
</head>
<body bgcolor=#befcb4>
<div id="responsecontainer"></div>
</body></html>
If you're problem is triggering the actual sound, you can find that here. As far as determining whether there is a new element in the page, I'd just compare it to the old one.
You can easliy create a HTML Audio Element with javascript:
<audio autoplay><source src="youraudiofile.mp3" type="audio/mp3"></audio>
After you created it in jquery with .append() or whatever just add an .delay(2000) in ms with your length of your file and then remove that element again with .remove()
e.g.
var audioElement = $('<audio autoplay id="music"><source src="youraudiofile.mp3" type="audio/mp3"></audio>');
$("body").append(audioElement).delay(1000).remove("#music");
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();
})
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.