I'm trying to show a button only when the user reaches at a certain time of video, like button would appear only when the user has seen 20 minutes of video. Have no idea about it, would really appreciate inputs. Thanks
Well IF the video is playing through html5 (a video tag) NOT EMBEDDED the following code is one route you could take.
// the video element
var video = document.getElementsByTagName('video')[0];
// add an event listener for 'timeupdate'
video.addEventListener('timeupdate', function() {
// 20 mins in seconds
if ( this.currentTime == 1200) {
// code to add the button here...
}
}, false);
You should really check out html5 audio/video api
Not sure if you want to know how to make a button appear or how to check the the current time of a video clip.
I'm hoping it's the former. To check the time of video playback you can call the currentTime property of your video using javascript, as such:
// set your video element to a variable
var video = document.getElementById("my-video");
// get the current playback time of the video (returned in seconds) and set to variable
current_playback_time = video.currentTime;
Related
How to interact with the YouTube player on youtube.com – not the iFrame API? E.g. seek or play/pause the video. I want to set current time of playing video programmatically with my extension.
//First get the video
var myPlayer = document.getElementsByClassName('video-stream html5-main-video')[0];
//Now you can:
//Play video with
myPlayer.play()
//Pause video with
myPlayer.pause()
//Go to particular time with
myPlayer.currentTime = 40
//will take your video to 40 seconds.
//To get current time just use
myPlayer.currentTime
How to detect if user jump/forward time in html5 player. I can only access current time but cannot detect if user skip video time.
There are two events that you can make use of:
seeked: Fires when the user is finished moving/skipping to a new position in the audio/video
seeking: Fires when the user starts moving/skipping to a new position in the audio/video
For example:
var video = document.getElementById("your_video_id");
video.onseeked = function() {
alert("User jump or forward time");
};
When I'm using video element in a webpage, the video data source is from another website. If the network is well, it will fetch video data from that website and If you want to let the video play smoothly, the buffering data video.buffered.end(0)-video.buffered.start(0) of the video must be longer than the currentTime video.currentTime , of the video.and I want to know wheather there exist such a numberbuffering data long minus video's currentTime` that can make the video play smoothly.
Generally Speaking, the number is not exits, but you can assume an number such as 3, 5 etc,when the time of the buffering minus the currenttime of the video is larger than 3 or 5, the video will play smoothly, otherwise, the video will be in buffering stage, and it will jank, play not smoothly.the code is as bellow:
if(window.video.buffered.length !== 0){
// assume the user have not use the progress bar to control the play progress of the video, so there is only an element in buffered array(object)
var bufferTime = window.video.buffered.end(0) - window.video.buffered.start(0);
var currentTime = window.video.currentTime;
// another number is OK;
if(bufferTime - currentTime < 2){
video.dispatchEvent(bufferingEvent);
// write capture event function;
}
}
Using a shared video object I'm loading and playing different source movies dynamically. Resetting the current time like this works fine on the desktop;
$('video').bind('loadeddata', function () {
var video = document.getElementById('video');
video.currentTime = 0;
});
...but while QT is playing on the iPhone the newly loaded movie continues from the previous position of the play head. I tried using "loadedmetadata" also without success. Is there another way to restart the QT player?
I'm having a problem preloading HTML5 audio content and then using what I have in cache rather than attempting to redownload the audio every time I try to replay it.
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungFuPanda2_tj/
The experience is suppose to be that when someone clicks on the banner, it pops up an ad with a loading bar. THe loading bar is loading all the images necessary for the animation. In the meantime, the audio is also getting loaded via audio tags already on in the DOM (which is fine). After all the images are loaded, the loading bar disappears and the user can continue on. There are 4 buttons on the bottom of the screen that they can click. Clicking one of them plays the audio file and images do a flipbook-style animation thats synced to the audio.
Audio Tags:
<audio id="mmviperTrack" src='tigress.mp3'></audio>
<audio id="mmmantisTrack" src='viper.mp3'></audio>
<audio id="mmtigressTrack" src='kungfu3.mp3'></audio>
<audio id="mmcraneTrack" src='crane.wav'></audio>
Play Button Event Listeners:
button.addEventListener('click',function(){
if ( f.playing ) return false;
f.playing = true;
button.audio.play();
},false);
button.audio.addEventListener('playing', function(){
animate();
}, false);
The problem is, in javascript, everytime I click play(), it reloads the audio file and then plays it. I can't seem to get it to load the audio once in the beginning and go off of whats stored in memory rather than try to reload the audio every single time I click the button.
I've tried experimenting with the preload and autobuffer properties, but it seems that mobile safari ignores those properties, because no matter what I set them too, the behavior is always the same. I've tried experimenting with source tags and different file formats... nothing.
Any ideas?
Alright, so the solution was a bit of a hack, cheat, workaround, whatever you want to call it.
What I noticed is that if I hit the play button on an audio file that I just played, it doesn't reload itself. It could be because I paused the audio after it finished playing through, but I'm not 100% sure on that. In any case, what I did is I combined all 4 audio files into one large audio file (yay Audacity~!). Then, every time I hit one of the play buttons I would set the currentTime property of the audio object to whatever the starting point of that track and then play the track until it hit its ending point, and then pause it again. Mission accomplished! Loaded once in the beginning and never again for each play.
Not crazy about the idea that I had to combine all the different audio tracks, but hey it works.
Oh, also. To get the audio track to load and fire a "canplaythrough" event, I attached this function to a user click event:
var track;
function addHTMLAudio() {
track = document.createElement('audio');
track.id = 'mm_audio'
track.autoplay = false;
track.preload = false;
track.addEventListener('canplaythrough',function(){
track.removeEventListener('canplaythrough');
audioLoaded = true;
},false);
document.getElementById('body').appendChild(track);
track.src = f.trackURL;
track.play();
setTimeout(function(){ track.pause(); },1);
}
playButton.addEventListener('click',function(e){
if ( playStatus > 0 ) return;
playStatus = 1;
var myId = e.target.parentNode.id;
var myClip = findClip( myId );
myClip.state = 'active';
track.currentTime = myClip.tIndex.start;
track.play();
runAnimation(myClip);
},false);