I'm using PreloadJS as part of an application that's being built with the CreateJS libraries. PreloadJS is being used to pull in graphics and audio files listed in a manifest. I've setup a progress bar and hooked the preloader's fileprogress and fileload events to update it. I'm getting progress updates as the images load, so I can see the progress bar crawling along, but I never get fileprogress updates for the audio files, just the fileload (file is completely loaded) so the progress bar sits idle and then suddenly jumps to 100%. Since the audio files are by far the largest assets, this creates something of a problem as far as providing meaningful load progress to the user.
I've looked at the documentation for PreloadJS and it indicates that XHR loading is the preferred method because it does provide the progress updates, but that PreloadJS can fall back on things like tag-based (<audio>) loading of audio files.
None of the file loading is local or cross domain, so it would seem to me that PreloadJS ought to be using XHR.
Is there a way to force PreloadJS to use XHR for everything so I can get consistent progress updates or why would I not be getting progress events for these much larger files?
I believe there are open bugs in PreloadJS and SoundJS which prevent audio loading from reporting progress. I have logged issues for both libraries:
https://github.com/CreateJS/PreloadJS/issues/99
https://github.com/CreateJS/SoundJS/issues/119
Some additional info:
Although PreloadJS will try and favor XHR-based loading for filetypes it controls, audio loading works a little differently.
SoundJS actually injects the functionality into PreloadJS to handle loading, and will not respect the useXHR parameter, instead relying on the browser capabilities (and SoundJS plugins) to load and play audio. Unfortunately, web audio requires an array buffer (loaded with XHR), whereas HTML audio requires HTML tags, so the playback capabilities dictate how audio files load.
By default, SoundJS will default to load/use the following plugins in order:
WebAudio (therefore XHR)
HTML (therefore tag-loading)
This should favor XHR-loading and webaudio for most browsers (IE is the standout that will almost always require HTML loading). You can force plugin order by registering the plugins manually before you begin playback/
Thanks for the surfacing this!
#Lanny is correct, there are open bugs for this issue. Currently SoundJS is setup in a way that always uses Tag loading with PreloadJS, even when using WebAudio which loads via xhr. The result is that regardless of plugin, there is currently no way to get progress events.
The good news is that we are currently in the process of revising how loading works between PreloadJS and SoundJS and this issue should be resolved.
Related
I have two live videos feeding an encoder which creates H.264 chunk files and an HLS manifest which is being served by an apache web server.
A browser page using video.js shows a player. Pressing "play" on the browser properly plays the video. It works well.
However, if we change video sources (by flipping the switch in the picture below), there is a considerable delay (10 seconds) before the new content is displayed in the player. I'd like to get that to 3 seconds.
It appears that video.js and/or the HTML5 player in browser is buffering that amount of content. (if you delete the files on the web server, kill apache, or even pull the ethernet cable, the video keeps on playing!)
A button on the web page controls the switch. When clicked, I would also like to clear or reset the player so that it immediately re-reads the index.m3u8 manifest and downloads the new chunks.
So far, haven't found anything promising searching the internet or in the video.js API docs. There are lots of articles on API calls for fetching the current buffer percentage but cannot find any API for clearing it altogether.
Any ideas?
The encoder is set for 3 second chunks and the playlist depth is set for 10 entries.
I had a similar problem. Since i could not find a reliable API for this, i came up with a rather dirty workaround to clear the buffer:
var ctime = player.currentTime();
player.currentTime(0);
player.currentTime(ctime);
This currently works for me in all major browsers.
I have implemented a lazy-load solution for images using http://www.appelsiini.net/projects/lazyload, and it works as expected.
Now that the DNN skin I'm working on is responsive, I want to make use of ImageResizer's responsive solution: http://imageresizing.net/blog/2013/effortless-responsive-images -- the setup is working right now, but when combined with lazy-load, the images that are served are no longer responsive.
Is there a way to combine these two technologies?
We run the latest .NET and IIS 7+. Thanks in advance!
Images added to the page after DOMLoaded will not be detected by Slimmage.js unless you call window.slimmage.checkResponsiveImages() . If you use a separate lazy-load or jQuery plugin that modifies images, call checkResponsiveImages() after it completes its work.
Browser vendors advise against lazy image loading, as it drains mobile device power. Turning on the wifi or LTE radio is the most expensive operation for a device, and lazy loading can make it 3-10x more chatty.
Unfortunately for me, Meta Slider WP plugin does not support lazy load, but it's perfect for what I need -- well almost. Here's why:
I have a ton of images (per slider) that will be displayed in multiple sliders using this WP Meta Slider plugin. All sliders will use the Flex Slider option, not the other options they have available. And, as you can imagine, the page load time is awful.
I looked up lazy load and came across this site:
http://www.appelsiini.net/projects/lazyload
It seems to be the perfect solution for what I need, but where do I need to input the snippet of coding in Meta Slider files to get this plugin to stop loading all the images at one time? What's happening is when a visitor comes to the site, this plugin loads every single image you have uploaded to it at that first-time page load which is causing the page to load awfully slow.
Additional info:
The images are pngs, 120x220 and under 50kb. I have found that converting them into jpgs instead of gifs compresses the file size to be between 12kb and 15kb, but anything lower, the images begin to lose color quality and the image color quality is extremely important.
END OF ADDITIONAL INFO
Anyway, my image database is growing and I need the images to only load upon the visitor scrolling up or down to reduce the page load time as much as possible so visitors will not be turned off and leave the site.
Thanks!
Oh, here's the plugin, I'm using:
wordpress.org/plugins/ml-slider/
Is it possible to capture a snapshot of a video that's loaded using the HTML5 video element and use that as a preview image until the video loads or the play event is triggered? I know about the poster attribute but I want the thumbnail to be self generated, like a random frame from the video. Sort of what YouTube/Vimeo does.
Thanks,
I don't think that this is possible in pure HTML5. Principally because the stream is not loaded when you see the 'object' in the webpage so the client can't get the desired frame.
However, the best option for you is to save / cache the 'random frame' before loading the page and then use it as the poster of the video. This will allow you to reduce the client work and save the bandwith.
check THIS, which is the first thing that I've found (if you're using PHP and you want a 'quick and dirty' way to get the frame)
Update
Apparently HERE there is a solution with popcorn.js BUT it seems that you can't do it in the way that (I suppose) you need.
This because it would be possible to do this only inside the same domain due to browser security issues.
I am planning to build a system to broadcast public events (trials, meetings, conferences).
A key request will be the insertion of live subtitles to the A/V stream.
The subtitles will be "live" since they will be produced by an operator while the event will happen.
I suppose the HTML5 "track" element is not yet implemented by any of the major browsers, but: can I expect to eventually use it for live subtitles? Will I be able to inject the subtitle to the page while the stream is playing?
Please Look at the following links. Looking at the link i am having to believe it should be possible as they are using Js to show subtitles
http://www.storiesinflight.com/js_videosub/
http://cuepoint.org/
You may also consider http://mozillapopcorn.org/ which is to show content on timing of the video. So technically u can use this with ajax to show/stream subtitles
There are HTML5 video JS libs that support subtitles (eg: VideoJS supports the .srt format, there are several easily Google-able others), however to the best of my knowledge none of them support streaming subtitles.
I think you may have to build your own solution for this. If I were to do it, I'd probably try doing something with Socket.IO's broadcast functionality that can push data out to all connected clients at once, and have your client-side JS listen for new subtitle events and render them on screen as they come in. You can use plain ol' CSS to overlay the text over the HTML5 video.