I know how to start and stop a video with play() and pause(), but how do I put a video back to the start in HTML5 using javascript? is there a way to move the pointer back to the start?
Set the currentTime property back to 0.
To have a proper stop functionality you could do the following:
var video = document.getElementById('vidId');
// or video = $('.video-selector')[0];
video.pause();
video.currentTime = 0;
video.load();
Note: This is the only version that worked for me in chrome using nodejs (meteorjs) in the backend, serving webm, mp4, ogg files
load() will reload video and put it back to start
Related
do you have any information related to the audio tag on MacOS Safari. The issue I am having is when I use audio.play() the sound is delayed 100ms - a full second. It is as the sound is being reloaded from the server each time.
I am only using one file and I was hoping maybe there was a work around for this things I tried was to play the audio file and pause it before the end and them move the position and the play the audio again but I beleive the play() function in safari actually reloaded the file.
Thank you!
Is it possible to fully buffer HTML5 video in Chrome (and Opera)?
I host the movie in .mp4 and .webm on amazon S3. In HTML I use standard <video> tag. The server responds with status 206 Partial Content. It is great, as it allows the browser to download any part of the video but I need to be able to seek instantly to any part of the file.
I tried:
.PROGRESS event. When Chrome stops buffering the first part, the connection is killed. The next parts are downloaded in new connection, so JavaScript isn't able to continue checking total downloaded data. Even if it could, the old data isn't stored in cache. This method works in Firefox and Safari. Heck, even in IE10!
XHRS. I am able to fully download the movie, but when the video starts playing, Chrome tries to download the movie from the server again. I even tried to pass the movie into HTML in base64, but that's to much data
FileAPI. Chrome isn't able to create BLOB big enough and crashes.
Any help is welcome!
ps. I am aware of od and similar questions, but I hope something changed since they were asked.
Because S3 supports partial downloads, Chrome initially buffers "only what's needed" in front of the playhead and then stops buffering. It will continue buffering "only what's needed" when the video starts playing. This means that depending on the user's download speed it will stop buffering now and then, just because it has enough buffer to play continuously.
But if you pause the video after having played some, Chrome will not stop buffering and go through all the way to the end.
This example exploits that technique to entirely buffer the video off screen before showing it on the page.
Tested on Chrome 32
// Create video in background and start playing
var video = document.createElement('video');
video.src = 'video.mp4';
video.controls = true;
video.muted = true;
video.play();
// Pause immediately after it starts playing.
video.addEventListener("timeupdate", function() {
if (this.currentTime > 0) {
this.pause();
video.muted = false;
video.currentTime = 0
this.removeEventListener("timeupdate", arguments.callee, false);
// When whole video is buffered, show video on page
video.addEventListener("progress", function() {
if (Math.round(video.buffered.end(0)) / Math.round(video.seekable.end(0)) == 1) {
document.body.appendChild(video);
this.removeEventListener("progress", arguments.callee, false);
}
}, false);
}
}, false);
Have you tried the canplaythrough event?
Not in the traditional sense, I mean. Rather in a 'hacky' way. canplaythrough is triggered when the browser detects that it has enough video buffered to play continuously without pausing. I am guessing that this event triggers about the same time as chrome pauses buffering. If that's the case, it could be use to trigger a request for rest of the video.
I have not tried it, but the HTML5 video object contains a buffered property
var video = document.createElement('video');
video.buffered.start(0);
video.buffered.end(0);
Could you try monitoring the buffered (Such as with this thread chrome html5 video buffered.end event)
Then continually change the current time to right before the buffered time using
video.currentTime = video.buffered.end(0) - 1;
There are several ways to load a video all the way then play it:
1. There is the goody goody browser developer would be proud way:
var video = document.createElement('video');
video.src='myvideo.mp4';
document.appendChild(video);
video.load();
video.addEventListener('loadedmeta',function(){
video.play()
});
2. And there is the lazy "But, I'll get carpel tunnel!" developer way:
<video src='myvideo.mp4' onloadedmeta='this.play()' preload></video>
Sources:
http://www.w3schools.com/tags/tag_video.asp
how to run js code when video is fully buffered/loaded
How do I add new Video entirely from JavaScript?
javascript with html <video> load() & play() function not firing
http://www.w3.org/wiki/HTML/Elements/video
Be careful using video.buffered.end(0). According to my experience, it works with Chrome but it fails with IE9.
I don't know what happens, IE9 seems to forget to do the last update to video.buffered.end() at the end of the buffering process and the video.buffered.end(0) is a little bit smaller than video.duration.
So, if you think your page could be used with another browser than Chrome, don't use video.buffered.end(0).
I making Streaming video with webRTC.
I want to reload video without stopping on HTML5.Src file is my filesystem.it's appending chunk while video playing.
Please tell me (´・ω・｀)
Did you try to add the loop parameter to your video tag?
I need a solution to control the flv player of Dreamweaver CS4.. I think I have to use javascript for this. When you click on a div container it should start the video, another click on the same container will stop the video. - BTW I use the JQuery framework.. so may you can compress the code.. Thanks!!
Pseudo javascript:
If played == 0
On Click "#acooldiv"
PlayVideo "object flv"
played = 1
If played == 1
On Click "#acooldiv"
StopVideo "object flv"
played = 0
StopVideo should bring the video back to 0:00 (so its not a pause its a reset of the video playing)
Sorry I'm not familliar with Dreamweaver, but why you want to control the flv player in that program? Don't you want to play a flv when it's in the (html)webpage and play it via javascript?
If you mean play FLV when its in the webpage:
You can communicate with the flv player (see here). But maybe better to embed these play/pause features in the flv player itself, because it really basic and probably most flv players already have it.
I have a javascript that plays audio in the browser, using the html5 <audio> tag. It works fine in the iPhone browser, but not in Android. (Testing using a htc desire with android 2.1.) Anyone know why?
My code:
function playHTML5(sound, soundcv){
// sound = url to m4a audio file
// soundcv = div in which the audioplayer should go
var audio = document.createElement('audio');
audio.src = sound;
audio.controls = "controls";
if (currentSound != null){
soundcv.replaceChild(audio,currentSound);
} else {
soundcv.appendChild(audio);
}
currentSound = audio;
}
By the way, I am also trying to enlarge the audio button that shows up in the iphone (the default one is quite small), with no luck so far - would be grateful for any ideas!
The latest Android browser in FroYo does not yet support the HTML5 audio element. This is not a bug, rather a feature that has yet to be implemented. It may come in Gingerbread.
Update: The Gingerbread browser has the audio element.
Here is link to Google Android bug, which filed for lack of support of AUDIO tag in Android.
Please, vote on it.
http://code.google.com/p/android/issues/detail?id=10546
BTW, there is work around, which let you play natively MP3 in Android 1.6 .. 2.2, like that:
<video src="test.mp3" onclick="this.play();"></video>
I cannot figure this out either. BUT, this test page created by Apple plays HTML5 audio on the Android: http://www.apple.com/html5/showcase/audio
how did apple do it?
Have you checked your audio format ?
I was having trouble on my Kindle Fire, and found one small thing which seemed to fix it.
<audio>
<source src="someclip.mp3" type="audio/mpeg" />
</audio>
I had mistakenly been using "audio/mp3". I'm using a player without its native controls (using HTML5/JS).
I got this working on a project using trigger.io deploying to a Nexus 7 running Android Jellybean, but the audio only plays if I use absolute URLs at the moment. I'm not sure what the relative path is yet to use audio from within my project, but hopefully this will help somebody out...
(function() {
var currentSound;
// I have a div called "page"
var soundcv = document.body;
// This only works for one sound for simplicity's sake
function playSound(sound){
if (currentSound == null){
var audio = document.createElement('audio');
audio.src = sound;
soundcv.appendChild(audio);
currentSound = audio;
}
currentSound.play();
}
// This isn't a real audio file URL - replace it with one of your own
playSound('http://example.com/example.mp3');
})();
I've been tinkering all day on this and I finally got mine to work on my old Samsung Droid browser with the yahoo webplayer:
<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>
Works great puts a little arrow icon next to the text that you can click to play your mp3. Thanks Yahoo.
I forgot to mention that the audio does NOT show up in my Chrome or Firefox browser when testing this locally. Works great on my phone browser though.
I know this is a hack, but it works everywhere (as far as I know)!
You can use the video element and convert your mp3s into mp4 and ogg files (ogg for firefox on android). You could also style it so it doesn't display any uneccesary default players. See code below:
<video id="audioTest" width="1" height="1" style="top: -100px; left: -100px; position: absolute;" preload >
<source src="audio.mp4" type="video/mp4">
<source src="audio.ogv" type="video/ogg">
</video>
You could then play it in your js code using:
var audioTest = document.getElementById("audioTest");
audioTest.addEventListener("ended",onSoundComplete,false);
audioTest.play();
in body
<audio id="myAudio" src="audio/bomba.mp3"></audio>
in javascript during the event
document.getElementById('myAudio').play();