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? (:
Related
I would like to have a web page being able to act like a music player.
The user enqueues a list of audio files (hosted on the server) and they start playing. When the first audio is over, the second begins, etc, until the last one.
I was able to easily implement this functionality using an <AUDIO> element, and replacing its src attribute with Javascript by adding an event listener on the ended event.
The problem is that this does not work consistently on mobile, because once the screen is locked, the Javascript does not keep executing. It may work for one song or two, but at some point it stops "skipping" to the next audio track.
From my understanding, this behaviour is caused by the fact that mobile browsers stop the Javascript event loop after some time to save battery when the screen is locked. I am aware of the Screen Lock API, I assume keeping the screen always on would solve my problem, but I don't want to keep the screen always on.
I could delegate playing audio files to a web worker, which should theoretically keep running in the background. Still, I'm not sure it won't be stopped when the screen is locked, and most importantly I am not sure it can even play sounds.
Is there anything similar to the Screen Lock API that allows me to ask permission to keep scripts executing also when the screen is locked?
If not so, how could I overcome this problem?
After some research, I discovered that the act of killing the javascript event loop is highly browser-specific.
Chrome for Android seem to let the playback run indefintely.
Firefox for Android is stricter, and kills the event loop.
The System Wake Lock looks like a promising API for solving the above problem. At the moment, the W3C is still in process of collecting use cases in order to be able to define a new standard:
https://github.com/w3c/system-wake-lock/issues/4
I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage. I used the following code
var aud=new Audio("someAudio.mp3");
$(document).ready(function(){
setTimeout(function(){aud.play()}, 10000);
});
It is working perfectly fine on desktop browsers. However, the audio is not playing in some mobile browsers like Google Chrome though it is working in Firefox. What may be the possible reason for this and how to fix it? I saw some similar questions but didn't find a suitable answer.
Thanks in advance
I'm trying to do a simple thing. I want some audio to play exactly after 10 seconds when the user enters the webpage.
You can't unless there has been user interaction.
Handle a click event for some element. In that event handler, play some other audio. (This audio can be silent!) After 10 seconds have passed from load, if the user has touched/clicked something, and you've done this, you should be able to play your audio file.
I'm trying to implement Youtube's video player on [this][1] page.
I wanted the video player to play in a lightbox when a link was clicked on the page, or to pop up when you linked to the video ([example link][2]). I'm "mostly" happy with how it's working. The things that I am having issues with are these two separate things.
1) On some computers (not browser specific), sometimes (not always) the onPlayerReady (event) function will not run. The code for the pop-up is inside this function, so the video doesn't play. The only common factor I can find is that 100% of the time it works when you refresh the page.
2) When you click a link before the page is finished loading, the video player loads, however the video itself is not loaded. I assume the loadVideoById function isn't running. I'm not sure how to stop people from making this mistake. Again, it works perfectly if you close the player and reopen it.
When you visit from a link the page refreshes to a url that doesn't include the anchor in order to keep people from getting stranded on the linked page. This is not an error.
I'm not sure what you need to see since there is a live demo, so I'm not going to clutter this up by including a bunch of stuff you don't need. I will instead respond or edit with whatever code you need to see.
If you find any other glaring errors please let me know.
EDIT: The community was apparently helpless to even respond to my question. I worked around the problem using a different process so the question is no longer applicable. I'm disappointed in this community that came together to critique and edit my question, but had not a single suggestion for me.
EDIT2: Links Removed
I have come here after much trouble with something that may be only related to videos, and Is likely a bad understanding of page resources in general. What I am trying to accomplish is the ability to have a single web page in which, by clicking 'forward' and 'back' buttons, one may change the contents of a div to display one of the videos in obvious sequential order. The video is currently in mp4 format in a html5 video element.
I have tried a few methods.
directly changing the src of the source element (does not seem to do anything)
remove the element, and re-add it with different src. (has problem described below)
remove the element, and use Jquery .load() to place an external html file with the entire video element in it, including a separate html file for each src. (has problem described below)
remove the element, and re-add it with a src pointing to a download of the file from GridFS using the python flask framework. (has problem described below)
Ok, so the main issue I am having is with repeat downloads of the same video from the page. Say if you click 'next video', then 'previous video'. This causes the video to be 'black' (not loaded at all, acts like src is broken). The first time each of the videos are requested, it loads in under a second, the second time varies but is always over 10 seconds. before the content of the video pops up and it becomes playable. Google chrome's dev network tools lists the media as 'pending' while I am waiting, when when it is done waiting finally it turns the above video to red (canceled) and the new source to 'partial content'. During the wait time, it can not seem to pull anything from the server including rollover images.
I have tried this locally with flask and python simple html server, as well as on an 8 core server over gigabit Ethernet. This is not an issue of random network latency, something weird is going on.
One of the things I am trying to figure out is how making a new request to the server works with partial content. I had some idea that the browser cache would store the file so that the second time loading it should be faster, which would be optimal anyway. Does this still happen with html5 videos?
Also of note, the files are fairly small, one minute or so videos of about 20 mb. It seems like the web server is just blocking the second request for some reason and I am wondering if any of you have ever heard of this. I can post code upon request but I think the concept is pretty much straightforward.
I plan to use GridFS with flask for the final implementation of this site.
Due to the below suggestion, I have tried doing away with the source element and having the src attribute attached onto the video itself. This produces the same result. Here is the fairly simple thing I am doing:
$('#addlinks').click(function(){
$('#maininside').remove();
$('#maintext').append('<div id=maininside></div>');
$('#maininside').html('<video width="100%" controls src="/getmedia/dangerisland-01-video-01.m4v">Your browser does not support the video tag.</video>');
});
<article id="maintext">
<div id="maininside">
</div>
</article>
The first time the button is clicked, there is a very slight delay and I can see high network usage in a monitor as the video is downloaded. Once the button is clicked again, I get no network usage for about 30 seconds in this case, then it downloads at full speed again and comes back up. Here is the dev view of network use right after it comes back up the second time:
Thank you for any insight you might have.
There are a lot of sub-questions and variables here; not sure how well I can address them all--but I'll give it a try.
The comment by kalhartt steers you correct in regard to simply
changing the source. But I'll note that in my experience the behavior
you'll see from the various browsers as you go through this process
will be inconsistent. I've done some work on this over the past year,
and at least at the time it was a poor user experience--the user experienced the video as broken while the browser responds to the change in source and new
load. We ended up generating new video elements and switching them out (but even this can be fraught with pitfalls due to differences in which media events each browser is publishing when.)
I'm not positive how you're serving the videos, but the flask
development server is blocking (unless you set
app.run(threaded=True), I think.)
It's also possible you're running
into behavior caused by the internal video loading/caching logic in
the browser, and you will even observe significant variation in how each
browser handles these tasks. A good way to test
against this behavior would be to append a unique query string
(perhaps with a timestamp) for each load; the videos should happily
load (if the server isn't blocking.) If server blocking is the issue it may be worth hosting the videos on S3 until you're ready to focus on how they're delivered.
Another possibility is not destroying the original video object if you suspect it's going to be used again (instead you can pause it, remove it from the DOM, and save a reference to it). If re-use is an unlikely case, though, and especially if you expect the users to play many videos on a single page load, it may be best to discard them. A compromise might be retaining a fixed number of previous video objects.
I have tried using window.stop() to stop any currently loading images when a user closes a lightbox quickly after opening it.
It works perfectly and instantly stops all connections/images from downloading. However it has the side-effect of stopping active websockets connections.
Is there any other way to stop images/resources from downloading without closing a websocket connection?
Thanks in advance.
I'm pretty sure there is no way to stop the window from loading, but still load some things.
calling window.stop() is exactly the same as clicking the stop button in the browser, and it stops the loading of large images, new windows, and other objects whose loading is deferred, and that includes websockets, and any other scripts that where supposed to load, and you can't stop some things, and let other things load like the stop() function was never called. It's all or nothing really !
Okay I have found a solution. Although I don't really like it. It involves creating a hidden iFrame within which you load the image.
Described in full here:
Cancel single image request in html5 browsers