Develop Reference

Video doesn't effectively get its `playbackRate` or current time position changed

I'm trying to fast-forward a video playlist on a website to unlock access to the next one. Videos stream without the possibility of fast-forwarding, forwarding and I haven't any video control bar. I have to wait that they slowly finish. When I refresh the page, the video starts on the minute I've left it before. This is the relevant HTML code.
Looking at the video events I've found that it is an open source code of streaming videos, this is the whole relevant code I've copied from Firefox Debugger (with various events).
This is what I've tried on Firefox console to skip the video:
var video = videojs(document.querySelector("video"));
video.currentTime(video.duration());
but it just doesn't work (it reloads the page to the same video, basically it doesn't unlock the next one).
I've also tried to speed up the video with the following code:
document.querySelector("video").playbackRate = 2;
it speeds up but after a second the video gets stopped, and when I refresh the page the time I was at with the speed-up doesn't get saved.
How can I effectively fast-forward/skip it? I have no idea why this is happening.

The site you are accessing is an online learning platform and they will have built in controls to try to avoid people skipping ahead - this is fairly standard with online learning.
There are multiple ways they could do this for example:
report progress regularly from the browser and if it is too fast, reset video back to an earlier point.
monitor requests server side and again if the requests indicate too fast movement through the video, reset the client or respond to the requests with earlier video.
You can study the network traffic and you may be able to find a way round their mechanisms. This might even be arguably a useful use of your time if you are studying Javascript or video, although the tutors probably won't see it that way, but it may be tricky if they have multiple checks built in. You may also miss a mechanism which flags your activity on your account in the background to the tutors which might not be something you want happening...

How to control how much of a HTML5 video buffers?

Context
I am trying to loop several HTML5 videos one after the other. This is achieved via Javascript with an event listener listening for 'ended' - the video to end. At which point the url to the video is changed and video.play() is executed for the new URL.
For simplicity, lets say there are 2 videos that are to be (auto) played. After the second video finishes playing, it goes back to the first and plays that one (and the cycle continues). The videos will get cached on the user's device after they are first played.
TL-DR: Now what I want to achieve is to code a HTML5 video to be 'mobile friendly', in respect to mobile data plans.
I want the video to either stream when the page loads or buffer only a few seconds from after the point from where the user is watching. So if the user is 5 seconds into the video, the buffer extends to 15 seconds into the video (so 10 seconds of the video is buffered in case the network connection is weak). If the user pauses the video, the video stops buffering. Though the user won't have access to controls; they will be unable to forward, rewind or pause. I only gave the example of the user changing the point of the video to emphasise that I want control over how much the video has buffered and will buffer.
Alternatively, I want the video to stream to the user’s device. And only download that which needs to be immediately played. This is the less desirable option and is probably less desirable than leaving the video tag as it is since if the user has a dodgy connection, the video will play, stop, play, etc.
The reason for me wanting to achieve this is that I have noticed in Edge, IE, Firefox and Chrome that the video auto plays (good, that's what I want it to do) and plays while simultaneously downloading the whole video to their device (terrible). Of course this behaviour is expected, but practically, it should not do this. If users leave the site straight away, why would we want them to download a whole video they won't see?
Sort of but not entirely relevant, it doesn’t help:
HTML5 Video: Force abort of buffering
Simply put, the thread shows only hacks to hide the src and not any actual control over the buffer. I need to control the loading of the buffer in real time, relative to at what point the user is at, and not based on a 'pause' event. I would also like to know if there is a little-known supported method across most browsers (I only really need to worry about this on mobile) to achieve this, as opposed to a 'hack'.
Nevershowmyface: From what I can gather from the code, it stops the buffering every 0.5 seconds. There is no code for resuming the video? As for why this method will not work, it is not buffering relative to at what point the user is at. For all intents and purposes, it is still buffering the video in a linear fashion, without depending on a variable (the point at which the user is at). It's just doing it more slowly or 'in chunks'. If it loads another chunk just before the video runs out of video, I risk the video stopping and waiting to load again if the connection is poor.
Preload:none is useless here since the video is automatically played (notice bold auto at the top). I should have been more explicit. When the page loads, the video automatically plays. Preload loads the video before the play button is clicked on; preload:"none" does not load the video before play is clicked. But since there is no play button and the video plays once the page has loaded, it is a useless attribute.
My hopeless conclusion in regards to what should be a vital and basic feature
(not a rant)
From what I have found, there is no standardised way to achieve this and there are only ‘hacks’, as described in the post, which only serve to provide limited buffering functionality/ control in some browsers, potentially breaking other browsers and potentially having no effect in other browsers. In light of this, I’m on the verge of giving up on this task so thought I’d ask if anyone else has effectively managed to achieve this; it appears to have no support or has not even be considered in HTML5 or Javascript; I might be and hope I'm wrong – would be great to have this in Javascript.
Do other web developers not consider this when they use videos on their sites? I have spoken to other developers about this and they said the data usage from a site is not or is rarely the concern of the developer.
While I understand there are more important things to worry about, it goes without saying this would be very important for mobile users with low data plans.
Analysis:
The HTML5 audio element does not have a stop() function, nor does it
have an option where you can set the amount of data that it is allowed
to buffer, or a way of saying you want the element to stop buffering -
Don't confuse this with the 'preload' function, this only applies to
the element before the play button is clicked.
I have no clue why this is and why this functionality is not
available. If anyone can explain to me why these crucial functions are
not implemented in a standard that should make web development for
mobile phones better and more standardized I would love to know.
And before someone says the conclusion from that post was that this is currently impossible, note:
1) I am dealing with a video file, not an audio file. Slightly different context, where the file being buffered is significantly larger than an .mp3 file.
2) I am not trying to stop buffering altogether. I am trying to restrict it and keep it relative to the point of the video at which the user is at. So you could actually say I am trying to stop it but at an 'x' number of times after the point where the user's video is.

Android video.duration does not load until video.play()

I have an html5 video which I am trying to set up callbacks at certain intervals during playback. The video starts playing from javascript with video.play(). Right now my code listens for the 'loadedmetadata' event, then queries the duration and sets up those callbacks. Works fine on mobile safari, but not on Android (2.3.4 and 2.3.7).
On Android, 'loadedmetadata' seems to be emitted before the duration is actually available. To test this, I logged the duration at every step of the loading process in my code to see where it can actually be read. Until video.play() and after one 'timeupdate' event, the video.duration property is 6000, regardless of the video being used. I tested this with an mp4 file and a 3gp file. Once those conditions are met, the actual duration is available.
I found this other post with similar issues [1]. The highest voted answer that wasn't accepted is how I originally set this up, and it works fine on iOS. The accepted answer also does not work, and suggests this is a webkit issue. I log the video.readyState property and see that it is '4' before the video starts playing, but the duration is still not available until after it starts playing, and the first 'timeupdate' event.
Our current workaround is querying the video.duration value, and only setting up the event callbacks when video.duration !== 6000. This is pretty ugly and I'd like to get to the bottom of it, lest this hack come back to bite. A discussion here [2] seemed to suggest that the issue may be related to encoding. That is, not encoded properly, android doesn't read the metadata correctly until the file is loaded, or perhaps at all and it calculates the duration another way.
Is there anything I can do to make this cleaner, or am I stuck with the hack for now?
[1] Problem retrieving HTML5 video duration
[2] http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/

Id use a setTimeout which calls a function to check whether the duration is available recursively.
This way the function can as soon as any information is available, display etc. the duration.

Mute YouTube sound in Delphi TWebBrowser

I'm coding a small Video Previewing tool in Delphi 2010, but I want to mute the videos programmatically, because as I said, it's for previews.
I've tried several versions of this code, but it always results in a script error, and in the end it's unable to do it.
WebBrowser1.ControlInterface.Document.QueryInterface(IHtmlDocument2, doc);
doc.parentWindow.execScript( 'document.getElementById("movie_player").mute()', 'javascript' );
Also tried to wait a little longer for the control to complete browsing, but still nothing.

Try to call your code in TWebBrowser's OnDocumentComplete event. This event is fired when the document inside is fully loaded, so the object, if it's expected to be there, is already downloaded and is present. Without showing of your JavaScript code I can't tell you more.
But I would do it differently. I would implement code like this one directly into your navigated web page. It can mute the sound immediately in the onYouTubePlayerReady event handler what means immediately when the YouTube player is fully loaded. It's better than call the function later on because it may produce a short sound burst because of some delay between the TWebBrowser's navigation completion and execution of your code.

reference to youtube API's http://code.google.com/apis/youtube/js_api_reference.html
I believe that at the time you're trying to mute the video, the "document.getElementById("movie_player")" fails.
try to call it like setTimeout( 'document.getElementById("movie_player")', 10000 ); where 10000 is 10 seconds, or even longer, probably the player needs a couple of seconds to be downloaded.
I would also give it a try in different browsers to see if it's actually something that doesn't work as expected in TWebBrowser.
EDIT
I would also give "VLC" a go, it can play swf files locally and remotely, there are interfaces for the VLC libraries, so why not? (:

Limitations of HTML5 Audio on iOS 4? Playlisting, background, etc

I've been evaluating HTML5 audio on iOS 4 and have been trying to understand its limitations. From what I can tell...
It is possible to play audio in the background
It is not possible to fire JavaScript events in the background upon track completion
It is possible to fire JavaScript events while the screen is off, but Safari must be in the foreground (before turning the screen off)
My goal for this current project is to create a dynamic playlist that will continue to fire events and move to the next track even while Safari is not in the foreground. Is this possible with the current way HTML5 audio works on iOS?
I am curious about how the chaining of JavaScript events works on iOS if anyone has additional information. It seems that you are allowed to queue back to back sounds, but it must happen shortly after a "human" function happens (for example, tapping an element). Anything else that tries to queue a sound outside of this human function is denied the ability to play.
Also...
Is it even possible to have events that fire to move a real iOS application to the next track? It seems as if the application is only allowed to finish its current audio stream and then it goes into an idle state. Just trying to figure out all the angles here!

This is quite an old question, so I'm not sure if you've found an answer already or not.
One thing I know is that an audio clip cannot be played via JavaScript on mobile Safari.
Autoplay audio files on an iPad with HTML5
The only way to make audio play, is through a click event. This wasn't the case on 3.x, but on 4.x it is. This is because Apple doesn't want the webapp to download audio on a 3g connection programmatically, so they force the user to initiate it.
I would think that if all of the tracks were started downloading (cached), then it may be possible. I would try forcing the user to start one track, and at the same time call .load() on all of the other tracks (in the same click handler). This will force the iOS device to start downloading the audio tracks, and you may be able to play the next track (not sure though).