I have a video.
http://www.redrose.com.br/riosultec/
I know the loop attribute loops from the start, but I would like to loop it after the third second. This is after the logo enters the screen.
I tried many things but I didn't find any solution for this.
I saw another topic about using JavaScript to load the video in a specific point.
I tried to convert it to reload the video and start only at the point I wanted but it didn't work.
This probably can only be done in JavaScript.
Videos have a duration attribute that returns the length of a video. We can also get the currentTime of a video, check if it equals the midpoint, and reset it to 0.
var video = document.getElementById("my-video");
var midway = (video.duration / 2);
setInterval(function() {
if (video.currentTime === midway) {
video.currentTime = 0;
}
},0);
Related
I think I need a script that will "get" all the playing HTML5 audio controls and "pause" them apart from the one the user clicks play on. I have seen and can handle simple play, pause, stop with just one audio controls but my skills fall way short of coding something to do what I'm after with multiples. audio controls is a neat solution and integrates well with my current design, I just need help making it work properly. The use case:
https://aberaeronskies.com/ page loads and nothing plays which is desired, user clicks play on a audio controls tag and the track snippet plays which is desired. User clicks on another one (there are 14) and it starts to play, trouble is, the first one is still playing which is not desired; one could click on all of them and they would all play!
The requirement is for a script or a call or whatever (I'm no coder, just doing this as freebie for a mate) that when a user clicks play on any one of the 14 tracks it pauses all other playing tracks.
I thought this was it: Pause all other players besides activated one. jQuery audio plugin for <audio> element and Play selected audio while pausing/resetting others but I'cant make them work.
It may be that this cannot be done and I need to rethink the whole presentation of multiple tracks and if so, further advice on where to look (in addition to above) would also be useful.
Thanks very much...
Ah...
This works
var curPlaying;
window.addEventListener("play", function(evt)
{
if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
{
window.$_currentlyPlaying.pause();
}
window.$_currentlyPlaying = evt.target;
}, true);
$(function () {
$(".playback").click(function (e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if (song.paused) {
if (curPlaying) {
$("audio", "#" + curPlaying)[0].pause();
}
song.play();
curPlaying = $(this).parent()[0].id;
} else {
song.pause();
curPlaying = null;
}
});
});
While having a video play through my local website, it's audio and video become de-synced after a while, like 40 minutes or so, also if I pause the video and then un pause it... I don't know if this is a problem with html 5, my browser, computer or what? But my audio is around 1 second ahead of the video, it's very noticeable... here's my code for the video in case it matters:
echo "<video class=\"videoContainer\" controls autoplay>
<source src=\"$movieUrl\" type=\"video/mp4\">
</video>";
I couldn't find any solution for this, in-fact... I couldn't find anyone with this same problem!
P.S Refreshing the page fixes the issue but I don't want to do that every time the video de-syncs... Also I don't have de-sync issues on YouTube etc...
There's currently no good API for synchronizing things with the timeline of a video, for instance captions or infoboxes. The spec has had "cue ranges" for this purpose earlier (which even earlier were "cue points"); it is expected that something similar will be added in the future, including support for declarative captions.
However, for now, you will have to either use a timer and read currentTime, or listen for timeupdate and read currentTime. timeupdate is fired at 15 to 250 ms intervals while the video is playing, unless the previous event handler for timeupdate is still running, in which case the browser should skip firing another event. Opera currently always fires it at 250 ms intervals while the video is playing, while Firefox currently fires it once per rendered frame. The idea is to allow the event to be fired at greater intervals if the system load increases, which could save battery life on a handheld device or keep things responsive in a heavy application. The bottom line is that you should not rely on the interval being the same over time or between browsers or devices.
Let's say you want to show a div element between the times 3s and 7s of the video; you could do it like this:
Hello world! var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); video.ontimeupdate = function(e) { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime
The hidden attribute indicates that the element is not relevant and should be hidden. This is not supported in browsers yet, so you have to hide it with CSS:
*[hidden] { display:none }
The data-starttime and data-endtime attributes are custom data-* attributes that HTML5 allows to be placed on any element. It's great for including data that you want to read with script, instead of abusing the class or title atributes. HTML5 also has a convenience API for data-* attributes, but it's not supported in browsers yet, so we have to use getAttribute a little longer.
The above would look like this using a timer instead:
Hello world! var video = document.getElementsByTagName('video')[0]; var hello = document.getElementById('hello'); var hellostart = hello.getAttribute('data-starttime'); var helloend = hello.getAttribute('data-endtime'); setInterval(function() { var hasHidden = hello.hasAttribute('hidden'); if (video.currentTime > hellostart && video.currentTime
This will run every 100 ms. Whether you should use setInterval or timeupdate depends on what you're doing and whether you're ok with the interval changing. Note that the setInterval example above also runs when the video is not playing, which the timeupdate example doesn't. It's possible to clear the interval with clearInterval when the video stops playing and setting it again when it starts playing, though.
If you want to synchronize something with the time playback starts, or after a seek, you should listen for playing and seeked — not play or seeking. The former indicate when playback has actually started and a seek has finished, respectively, while the latter indicate that playback or seeking has just been requested, but could take some time before it actually occurs.
I need to know the current time of a source that is playing, but I can't use context.currentTime because when I change the source.playbackRate.value the speed rate of the context don't change too, so I can't determinate where is the current position of sound. There isn't another way?
Edit, some code:
I use this functions to load and play an mp3 from the network
function loadSoundFile(url) {
source = null;
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = function(e) {
context.decodeAudioData(request.response, initSound, function() {
alert("error");
});
};
request.send();
}
var source = null;
var inittime = 0;
function initSound(buffer)
{
source = context.createBufferSource();
source.buffer = buffer;
source.connect(context.destination);
source.start(0);
inittime = context.currentTime; //I save the initial time
}
Then to get the actual position of the audio track I should do:
var current_position = context.currentTime-inittime;
This work fine while I don't change in the source the playbackRate:
source.playbackRate.value
I need to change this value dynamically to synchronize the audio track to another audio track that is playing, so I need to speed up, if the actual position of the track is lower than the position received from a "server" or slow down if it is higher. But if I change the play back rate how I can know where is currently the position of the audio track?
In fact now if I use
var current_position = context.currentTime-inittime;
current_position will be the time spent from the begin of the playback that is different from the current time position of the playback dude the changes playbackrate value.
Use the reciprocal of playbackRate, and multiply the time elapsed since the beginning of playback with that value. Assuming a non-offline rendering, at any given time you can use the following to calculate the actual position that takes playbackRate into consideration:
(context.currentTime - inittime) / source.playbackRate.value;
From the documentation of AudioParam.value:
The value property of the AudioParam interface represents the parameter's current floating point value, which is initially set to the value of AudioParam.defaultValue.
Which means the value of the value property will take scheduled changes into consideration as well. Note, that the calculated value might go backwards momentarily if playback rate changes quickly.
[This is in answer to the opening question in the first paragraph, and does not take in to account the edited in code that has been attempted to solve it, which I have not reviewed]
Well of course there is a way! There is always a way! You have to engineer it yourself!
There really is no need for Web Audio API to go any further. It gives you all you need. The currentTime will always tell you an accurate time. Using that, and your playbackRate, you can keep track of the current position yourself, by updating a position variable each time you adjust the playbackRate or need to know the current position.
Each time you update the playbackRate, or need to know the current position, update your tracking time by the time passed since your last change (store the previous currentTime), and modify the addition using the appropriate playbackRate. Hey presto! Now you have your own currentTime that takes in to account the playbackRate you are interested in. Reset your tracking variable any time you want to start your tracking again.
One of the things I most love about the MOD format is the ability to loop back to any given point in the song, making it perfect for songs that have an "intro" followed by a "main loop".
Of course, MP3 can't do this.
Up until now, I've done things like this:
<audio src="/path/to/song.mp3" onEnded="this.currentTime = 12.345;"></audio>
Where the float value is the time at which the main loop starts.
While this works there is a noticeable fraction-of-a-second pause as the audio restarts. I can lessen the effect of this pause by setting the target time a little ahead of where it should be, so the beats are at least kept closer in time, however it's not really ideal.
The main alternative I can think of is to manually loop the audio file (eg. in Audacity by copy-pasting) to produce a song that is longer than it would most likely be needed for, but the problem with that is that it would result in a lot of wasted hard drive space and bandwidth, and it wouldn't solve the problem of people liking a song and stopping to listen to it for a long time.
So I was wondering if there's any way to loop an MP3 stream. If I understand the format correctly, I should be able to determine at what position in the file (in bytes) the main loop starts (in seconds), so in theory I could construct a stream that loops indefinitely. However, would such a stream be supported by HTM5 audio?
Try measuring the delay each time:
function playSeamless(clip, next) {
if(!next) {
next = clip.cloneNode(true);
next.controls = false;
}
var start = Date.now();
clip.play();
setTimeout(function() {
var time = (Date.now() - start) / 1000;
var position = clip.currentTime;
var delay = time - position;
setTimeout(function() {
// Set desired currentTime on next here and adjust delay above
playSeamless(next, clip);
}, (clip.duration - clip.currentTime - delay * 2.35) * 1000 | 0);
}, 200);
}
playSeamless(yourAudioClip);
It was better, but not entirely accurate, so I need to adjust * 2.35 or make it a subtraction or something.
For HTML5 Audio, let's say you have a list of two songs you want to play. Currently I have it set up so that when the current song stops playing, it loads the new song and plays it. I want to have it so that it loads the next song while the current song is finishing, maybe 20 seconds before the current song finishes. I tried to change the src attribute for the audio object while the song is playing, but that just immediately stops playback for the current song. Is there some other method that allows me to preload the next song while the current song is playing?
You could use jQuery to create a jQuery object:
var nextSong = document.createElement('audio'); //Creates <audio></audio>
nextSong = $(nextSong); //Converts it to a jQuery object
$(nextSong).attr('autoplay') = false; //You don't want this dynamically loaded audio to start playing automatically
$(nextSong).attr('preload') = "auto"; //Make sure it starts loading the file
$(nextSong).attr('src') = url_to_src; //Loads the src
This should start load the song into an element in the browser's memory and when the song is over, call something like:
$(audio).replace(nextSong);
This isn't tested. You probably don't even need jQuery.
This may work without jQuery:
var nextSong = document.createElement('audio');
nextSong.autoplay = 'false';
nextSong.preload = 'auto';
nextSong.src = url_to_src;
Give it a whirl and let me know!
This might be off the mark, but have you tried calling the element's load() method?
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#loading-the-media-resource
Edit:
Ah, I think I misunderstood the problem. You want to play two songs back to back in the same media element? I'm not sure how feasible that is... it might be easier to place each song in its own Audio element. You could always dynamically generate these, if you're worried about flexibility.