I'm attempting to have JPlayer play an audio clip on a specific event, but I'm getting some finicky results. Sometimes the audio doesn't play back, sometimes the audio stutters on the first 1/4 second, and sometimes after playback a repeat attempt plays the audio clip, but starting near the end. The code I'm using looks like:
The setup:
$("#div").jPlayer({ready: function (){
$(this).jPlayer("setMedia", {
mp3: "./test.mp3"
});
}, swfPath: "/dir/", preload: "auto"
});
Event Fired:
$('#div').jPlayer("play", 0);
Any help is greatly appreciated, and maybe an idea of a better way (different plugin, or none altogether) to achieve the result would be awesome.
Thank you!
Side Note:
Main end platform is the Ipad (Safari), but cross-browser support would be the best!
What I ended up doing was using SoundManager2 to playback the audio file. It's been giving consistent results for all of the playbacks I've tested. Also, it works on many browsers, so it fits my needs just fine.
Related
My problem is very specific and can't find much in terms of resources.
I am working on a website that tells a story through scrolling and includes tons of CSS animations triggered by viewport (most likely using IntersectionObserver API) and background video.
Have a look at :
https://www.sbs.com.au/theboat/
the main challenge is finding a way to autoplay audio in the same way I trigger animations with all the browser's autoplay restrictions.
If you look at the link above how do you think this was accomplished?
Any help/guidance is appreciated.
Background:
The videos in my play list are all 1/2 second to 4 seconds long.
The playlist is randomly generated on page load.
Strategies
HLS Streaming - I've implemented this strategy (m3u8 playlists) and it works, but there were several issues with it.
Preloading all the vidoes - I am lacking experience and in-depth knowledge of HTML5 video. I have implemented a demo that preloads all the videos in separate <video> tags and then switches them in and out as needed. This works in Chrome, has frequent pauses in Safari, and violently crashes OSX in Firefox.
Is there a better way to do this?
Maybe a better strategy to preloading the videos?
Thank you so much.
looking to use HTML5 video tag and JS. the aim is to make a video swap from one video to the next very smoothly just like a cut in the movie. I have had a look at the API
http://www.w3.org/TR/html5/video.html#tracklist
if anyone has an idea that would be great. My current plan is to familiarise myself with the API and figuare out how to que up the video for a smooth change. currently sellect a src and then play() causes an ugly white space pause before the next video comes in.
many thanks for looking
Use firefox and make hardware acceleration on. if you have good hardware it should work.
and you can also try this method, imagine if you have 5 videos to play and when you are in the 2nd video you can keep them by the video currently you are playing ,keep them on left and right sides and make them pause. when you move on to the 3nd video you can just get that relevant video and make it play. this method should eliminate any unnecessary lags.
HTML5 videos use a very low amount of CPU, so there's no reason you can't have multiple tags on the page at the same time. I would suggest having them all on the page and then using CSS and JavaScript to transition between them.
You won't be able to make this work on iOS since it doesn't allow playback to initialize without user interaction. The user will have to click to start each video.
Annoying, but that's how Apple rolls.
Hey all I wonder if you guys know some trick that could help me out. What I have implemented is a slider that controls the seek position of an HTML5 video via the currentTime property. What I would like to have happen is as the user is dragging the slider the video is updating in real time.
What I have works but the video players image doesnt update to each frame as I set the current time. Any thought?
slide: function(e, ui){
seeksliding = true;
$gVideo[0].currentTime = ui.value;
},
Modern browsers are generally very good at seeking quickly, even to the point where you can synchronize two or more videos using Javascript, with the same kind of functionality you're describing. (Firefox around version 4-5 would take a few extra milliseconds and lose sync, but it's better now.)
The code you have should work, as long as ui.value is between zero and the duration of the video. But you may run into problems if a) the video is not loaded or b) there is something up with the encoded video file.
First, make sure the browser can play the video and seek without any Javascript controls. Just try opening up the file in the browser, first straight off your hard drive and then off the network. If you can't seek with the native controls, you can't seek with Javascript. I've sometimes seen seeking errors solved by re-encoding a video without B-Frames.
Next, see if the video is loaded when you're trying to seek. You can speed this up by adding a preload attribute to the video tag. And make sure the slider event isn't enabled until the browser has the video's duration, by putting the slider code inside a loadedmetadata event.
I have a web page with a video player preloading 3 videos (low, med, and high quality of the same video). Then, when the user clicks on one the button corresponding to the desired version, the video opens.
What I would like to do is to then stop the preloading of the two other videos.
Is that possible? In other words, can the "preload" attribute of the HTML5 Video tag be cancelled or stopped on the fly with some Javascript ?
I just came up with a solution to a problem I had that resembles your own. I am preloading a list of movies on my page, in series, but I need to be able to jump to one of them and prioritize it ahead of whatever might have already been preloading, in order to play it as quickly as possible.
I have a div#prebuffer element that holds the preloaded videos, as they are buffered. When I need to forget about preloading, I simply do this:
var $video = $('#prebuffer video:last');
$video.find('source').attr('src', '');
$video[0].load();
// it has now stopped preloading.
// and then, because I don't want this half-loaded broken cruft hanging around:
$video.remove();
It's slightly ugly, but I wasn't able to find a nicer way. And it gets the job done.
With jQuery, you can try:
$('#videoPlayerId').removeAttr('preload');
I don't know that it will stop a video that's already preloading.
From a UI perspective, why are you trying to preload all 3 videos at the same time? This will slow down the loading speed of all three; if you only preload one of them, more of the video will have a chance to buffer before the user starts viewing it.
I would suggest preloading one of the videos of a default quality and only loading a different quality video if the user selects it. This is the behaviour used by YouTube, Netflix, and others.
There is dedicated tag nowadays:
<video preload="none" ....>