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;
}
}
Related
I have a webpage which has a continuous(ish) livestream playing on it, but I want users only to be able to see and hear it at specific, exact times. I don't want them to have to keep disconnecting and reconnecting as this takes an unpredictable amount of time.
When the user loads the page, the livestream will autostart (muted and hidden - see below) and the user will have to unmute the video (even though they can't see it yet), but I don't want them to actually hear the livestream until the allocated time. I don't want them to have to manually unmute the video at the allocated times - My goal is to have everyone connected and stable so that (for example) at 10:04:30 precisely everyone can see and hear the livestream for 30 seconds, then it disappears (and mutes) until the next time at (say) 10:07:15 and so on. The process should happen in a way that allows the user to sit back in their armchair and not have to use their mouse or keyboard after the inital page load and unmuting of the livestream.
Dealing with the video side is easy - I can just show/hide a div with a black background that covers the video, but I'm not sure how to deal with the audio side of things. Is it possible to mute/unmute the webpage as a whole? Are there other ways to achieve this goal?
Another possible perspective is to have this done at the source somehow, by having the publisher connect and start publishing, but send blank video/audio until the right time, then switch over what is being sent. Again this needs to be done without the publisher having to keep reconnecting or do anything manually.
The publisher and viewers are all connecting using WebRTC.
Assuming something like the following:
<video id="vid" ...></video>
<div id="controls" ...>
<button id="mute-btn">Mute</button>
</div>
Then you need something like this:
const vid = document.querySelector('#vid')
const muteBtn = document.querySelector('#mute-btn')
vid.muted = true
window.userHasUnmuted = false
window.liveStreamStarted = false
muteBtn.addEventListener('click', () => {
window.userHasUnmuted = true
if (window.liveStreamStarted) {
vid.muted = false
}
}
// then, in callback for whenever live-stream starts...
if (window.userHasUnmuted) {
vid.muted = false
}
Original answer below
To mute a single audio or video element:
audioOrVideoElement.muted = true
To mute all audio or video elements on a page:
document.querySelectorAll('audio, video').forEach(el => el.muted = true)
Conversely, setting muted to false re-enables sound from that element.
For finer-tuned audio controls, you can also set the element's volume (in the range 0..1), for example:
document.querySelectorAll('audio, video').forEach(el => el.volume = 0.3)
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
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;
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);