I have been going around in circles with this so I have decided to ask for help.
I am trying to write a video based scenario that does the following.
video plays and at the end of the video a set of variables are changed and a new video is loaded.
I have set up the iframe and the first video plays fine. when the on ended event is triggered the actions are taken and the new video is loaded.
The problem arises when the second video as finished. The second video no longer triggers the on ended event.
Could anyone help me please?
I'm using the flvplayback component in an AS3 movieclip. I do have the source defined in the compontents properties to a video hosted on Amazon s3.
Now the problem is as soon as the swf loads in a browser it starts downloading/buffering the video even though it's not set to autoplay.
Is it possible to only have it start downloading if the play button is clicked (I do have a custom play button hooked up to player via AS3)? I have 3 separate video players in the swf each with fairly large videos and I don't really want to burn through a ton of bandwidth especially if the user only plays one video.
Thanks!
I haven't used the flvplaybackcomponent, but I'm assuming as soon as you specify a url, it'll start downloading. Try either not setting that until it's been interacted with, or -- do what everyone else does -- place an clickable image on top, then once that's done, create your video player.
I am porting a vehicle in-dash display unit app over to the browser. The big goal is to get it running completely within Mobile Safari.
It's an HTML5/JS music app that relies heavily on jQuery.load to move around between different "screens" by loading in page fragments.
The issue is that when a user selects a track to play, they are taken to the "now playing" screen, which should start playback of the track. The track is not playing though once this screen is reached, and the user instead needs to explicitly click play from this screen in order for audio playback to start. Once this has happened for the first time, autoplay works for the duration of the app.
I understand that Mobile Safari intentionally put blockers in place to prevent audio from autoplaying so that web apps are kept from consuming data unless in direct response to user input.
The thing is, my audio playback IS in direct response to user input...sort of. However, a bunch of things need to happen before my playback actually starts, and those things happen within the now playing page (calling API to get URL for track to be played, report user is playing track, get track metadata, yatta yatta yatta).
To try and get around this, I have the app preload a silent .1s mp3 file into the audio element on startup. Then in direct response to a click event to transition to now playing screen, I call .play() on the audio element.
I assumed that having a call to .play in direct response to user input would the subsequent call to .play() within the now playing page to work, since this is the behavior I had previously observed.
Only, it didn't seem to make any difference.
Any ideas on how I can adjust my flow in order for audio playback to start after loading the now playing screen?
EDIT:
Added some code snippets below
Vehicle.audio = {
init: function () {
audioElement.setAttribute("src", "/audioinit.mp3");
audioElement.play();
},
play: function (source) {
log("VEHICLE: playing audio from source " + source);
Vehicle.audio.stop();
audioElement.setAttribute("src", source);
audioElement.play();
},
In response to user selecting a track:
$(document).on("click", "a.play-track", function () {
Vehicle.audio.init();
/* my wrapper function for jQuery.load() */
replace_wrap("nowplaying.html");
});
Then on the now playing page, Vehicle.audio.play() is called.
The thing is, my audio playback IS in direct response to user input...sort of. However, a bunch of things need to happen before my playback actually starts, and those things happen within the now playing page (calling API to get URL for track to be played, report user is playing track, get track metadata, yatta yatta yatta).
Try adding a "touchstart" event listener to the entire "now playing page" which will then synchronously call .play() on the audio element:
$(document).one("touchstart", function () {
Vehicle.audio.init()
})
This way as soon as an iOS user touches anywhere on the now playing page, the audio should begin loading/playing.
AFAIK it is a restriction placed intentionally by iOS. User must interract with the device (touch/click event) before the script is allowed to start playback.
I am making a HTML5/javascript browser game and I have problems with my audio.
I have all my clips in a single mp3 file to minmize the number of requests sent and when I want to play a clip I seek to the clips starting position (audio.currentTime = startTime) and play (audio.play()) when the audio tag fires the "seeked" event via an event listner.
When I pause playback I use the audio.pause() method.
The problem I have is that, before the sound I want to play starts, a split second of the file is played from where the audio was playing before the seek.
Anyone else that has encountered this problem?
Anyone know what to do about it?
If you're using Safari, this might be your problem.
Also, I'm finding that Web Audio API is looking more and more appealing (see my possible answer to my own question, haha)
Edit:
Lastly, if you want to stick with the whole HTML5 Audio object, this question might point you in a different direction.
I am using OSMF and noticed when seeking almost immediately after, the "playing" event is fired causing my buffering icon to disappear almost instantly. The playing event is fired even though the video isn't actually playing. It takes a good 3-5 seconds before the video really begins playing. Has anyone heard of this?