I'm using Pizzicato for audio playing. If I call sound.start(0, 10) starting it at 10 seconds sound.context.currentTime doesn't reflect this, and in return makes my math wrong further down the line.
Is there a way to get the actual position its playing at? After manipulating it by pausing, and then replaying with offset? I'm doing it from a click event on a range slider.
HTMLMediaElement.currentTime
The HTMLMediaElement interface's currentTime property specifies the
current playback time in seconds.
const video = document.createElement('video');
console.log(video.currentTime);
var url = "https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3";
document.querySelector("source").src = url;
document.querySelector("audio").addEventListener('timeupdate', (event) => {
console.log(event.target.currentTime);
});
<audio controls>
<source src="" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
Related
I want to control the video to start playing from the exact time value as given in the JS code below.
But the player does not do as expect.
For example, if I do vid.currentTime = 1.2, the player will start from 00:00 sec. Or if I do 22, the player will start from timeline 00:21 sec
I am not sure it is because not possible to get the accurate timeline from mp4 (codec challenge)?
Thanks!
var vid = document.getElementById("video1");
vid.currentTime = 2;
vid.play();
<video id="video1" width="320" height="240">
<source src="http://example.com/movie.mp4" type="video/mp4" />
</video>
I think you should wait for the browser to load the metadata and then trigger the event on meta data loading. Let say if you want to start the video 21 seconds onward:
document.getElementById('video1').addEventListener('loadedmetadata', function(){
this.currentTime = 21;
}, false);
I have an HTML5 video that I want to play/pause when you click anywhere on the video. The code I wrote below works, but if I click the video a few times it starts to get slow and will even freeze sometimes. I saved the selectors in variables hoping that would take care of the issue, but it hasn't made a noticeable difference. Is there a bug in my code that I'm not seeing and the console isn't detecting? Or is there just a better way to write this so it isn't so slow? By the way, the intro-vid ID is on the <video> element in the HTML.
var $video = $('video')[0];
var $introVid = $('#intro-vid');
// If the video is playing, pause it when clicked
$introVid.on('play', function() {
$introVid.click(function() {
$video.pause();
});
});
// If the video is paused, play it when clicked
$introVid.on('pause', function() {
$introVid.click(function() {
$video.play();
});
});
EDIT: Here is the HTML
<video id="intro-vid" controls>
<source src="placeholder.mp4" type="video/mp4">
<source src="placeholder.webm" type="video/webm">
Your browser does not support the video tag.
</video>
You should not bind event handlers inside of other handlers, this way them quickly multiply causing troubles. Try this instead:
var $video = $('video')[0];
var $introVid = $('#intro-vid');
$introVid.click(function () {
$video.paused ? $video.play() : $video.pause();
});
I have a html 5 video on a page like this:
<video preload="none" id="movie" poster="http://my_poster_url.com/sourcefile.jpeg" controls>
<source id="mp4" type="video/mp4" src="http://my_mp4.com/sourcefile.mp4"></source>
<source id="webm" type="video/webm" src="http://my_webm.com/sourcefile.webm"></source>
</video>
Below that video I have a navigation where you can skip to different times in the video. It works perfectly when the video is playing, but when paused following error occurs:
InvalidStateError: An attempt was made to use an object that is not,
or is no longer, usable
Here the function:
$('#my_video_navigation a').click(function () {
var start_in_seconds=...//a variable that gets the time from a json based on the navigation index
$("#movie").get(0).currentTime = start_in_seconds;
$("#movie").get(0).play();
}
I added an if/else statement wether the video is paused or not:
if ($('#movie').get(0).paused) {
$("#movie").get(0).play();
}
and then tried to set the current time like above and even with a set timeout function so that it will wait till the video loaded and is playing but that didn't work. What am I doing wrong or what did I forget?
You should change the currentTime field of the media element, as you can see here in the API doc. There is also an example code here, at MDN
For reference, the sample code there:
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start(); // Returns the starting time (in seconds)
mediaElement.seekable.end(); // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end(); // Returns the number of seconds the browser has played
where the mediaElementID is the id of the audio or video tag.
Edit: It seems I've misread your question. I will take a further look.
Is there a way to cleanly stop the html5 video playback ?
There are options like:
Set videoElement.src = "" . This throws an error on the video element, with code = 4.
OR
call videoElement.load(). This sets the readyState = 0 but there is not much documentation around it.
UX Perspective
Looking on Google for the difference between pause and stop gave me various results which I can summrize as:
Pause: Playback is stopped. Hitting play again continues from last position.
Stop: Playback is stopped. Hitting play again continues from beginning
At least from the UX point of view that covers all grounds
Stopping of loading of media
If your real goal is to stop the buffering process from happening as well, then your current approach seems to be entirely correct, running the following code is not triggering any errors for me in any browser I tried.
var video = document.querySelector("video");
video.play();
setTimeout(function() {
video.pause(0);
video.setAttribute("src", "");
}, 5000);
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png" style="height:180px">
<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">
</video>
When after the page is loaded, I want to let the video start playing at 50 sec.
How can I code for that?
My current code is just like this.
<video id="video" controls="controls" autoplay="autoplay" name="media"><source src="video.mp4" type="video/mp4"></video>
<button name="test" onclick="alert(Math.floor(document.getElementById('video').currentTime) + ' secs elapsed!');">How much time has already elapsed?</button>
This post and MDN documentation suggests you can just set the video element currentTime = 50 when the page loads.
setting currentTime should seek to the value you set it to