Displaying song duration - html

I've been able to play media with a html5 audio element but the duration of the song never displays correctly, and when it plays the progress bar just fills up, although it does play fine. This is what I've been doing. I'm using ogg vorbis files.
Started with jPlayer, had this problem.
Heard the problem might be related to my Jetty server so I switched to Tomcat, but I still had this problem.
Tried using the plain html5 audio element and the problem persisted.
Put a video in my page with an html5 element, and that had the correct duration.
I imported all my audio from CDs using the same program, so although I can see the duration any number of other ways I thought I might try files from some place else. So far every file I try has the problem.
I've been hearing about an Accept-Ranges header but I don't know how to see if I'm using that header, how I would make sure to use the header, or when I would use the header(do I send it with the html page, do I send with with the audio itself? Can I add a header to a file?)

I'm very new to web programming and figuring out the ropes have been tough. In the end I just added the "Accept-Ranges" : "bytes" to every response my server returned. I thought I would have to be careful what responses I added headers to but this is working out. In clojure with compojure which is the language and framework I'm working in I just use a middleware that adds "Accept-Ranges" : "bytes" to the response map under :headers and it looks like there is a setHeaders function in the response object in Java.

Related

Can i play <audio> in html, from middle without downloading complete file

I need to play large audio file starting at different parts. But it starts to load completely anyway.
tried to #t=01:00:00, audio.currentTime , set many headers for partial content like "Content-Range"
Is this generally possible or do I need to use third-party libraries like howler js?

Use chrome extension to trick page into thinking it's not in an iFrame

Is there a way to create a Chrome extension to trick a site loaded in an iFrame into thinking it's not in a frame?
We load clients' sites into an iframe for demos, but some resources get blocked due to them disallowing being loaded in an iFrame. We'd like to load these sites into a frame as though you were browsing directly to the site in a standalone tab.
You should use the Chrome's webRequest in order to intercept the server response. See the API. Here you go for onHeadersReceived event where you are in control of any response headers => you need to remove X-Frame-Options header from the response.
That's pretty much it, if this is the only problem in loading those sites.
However, for the sake of completeness, in order to fully trick the browser (which you most likely do not need) you need also to inject a script into every page that would clear up some things like window.parent by simple removing them from window object and some other things like origin etc. However removing the header would work for 99.9999% of your use cases.

I keep getting a 404 from the youTube API V3 in AS3

We are actively working on moving our product from AS3 to HTML5, but until we complete the process we still have many clients using the Flash version of the Youtube API V3. We have gotten our project Key and are making the request with https://www.youtube.com/apiplayer?version=3&key=[key], it returns a 404 when the AS3 goes to get it, but returns the flash API when pasted into the browser directly.
We have Security.allowDomain("www.youtube.com"); in the code.
Here is how we are loading the API, which has worked for years.
_loader = new Loader();
_loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
var url:String = "https://www.youtube.com/apiplayer?version=3&key=*[key]*";
_loader.load(new URLRequest(url));
Trying to figure out what i'm missing.
The Youtube API is no longer working with AS3 code.
I don't think any remaining SWF versions of player will last long. Consider for any video ID, Having /embed/ used to give the HTML5 player or else using /v/ gave you SWF player. Now both link types return an HTML5 player. They have already started changing things.
Examples:
HTML5 : https://www.youtube.com/embed/1SnPedRxEIU
SWF (but now changed to HTML5) : https://www.youtube.com/v/1SnPedRxEIU ( edit: Seems this URL returned a direct link to the SWF file. Now Chrome browser asks to download, with no browser view unless contained in html file).
The only solution is to move faster to HTML5 (Youtube expects this for browser playback).
For anyone else interested, there's the final option to just extract video file path directly from the video page's source code or instead get a JSON by using http://youtube.com/get_video_info?video_id=xxxx. From either returned text (site source or JSON) you can decode the Unicode & HTML entities to reveal the file URL. The advantage of parsing page source is that you'll find even 1080p links, but JSON version is easier to work with.
you can try this solution, for me it worked https://github.com/myflashlab/AS3-youtube-parser-video-link

Can javascript be used to request a video and display it in an html 5 video player?

How can you use javascript to request a video from a server and then display it with the html 5 video tag? I'm trying to make a password protected area that passes back an mp4 file assuming the user has the appropriate session cookie stored, but I'm unsure what strategies you would use to pre-download the file, reference it in javascript, and then play the video.
I suppose this is just one of those things where sitting down with a pencil, piece of paper, and a little creativity does the trick.

How to handle URL changes and keep SoundManager2 playing on background?

I am developing a web application, where a mp3 player is present and user can play the music. Issue that i am facing is how to keep the music playing (and the player untouched) even when I change the URL - go to a different page? The same thing as Deezer or SoundCloud do. You can browse the web and listen to the music meanwhile. Please point me a direction how to implement it. Thank you all!
On soundcloud they don't actually change the page they just change some of the body content with javascript. You can simply do the same, by adding a hidden div for the music, and a div for the content, which calls an api (recommend jquery.ajax) to fetch the content relative to the url in the address bar.
With rewriterules inside the .htaccess file, you can make it so it ignores all query strings etc. So it will always load the index.php file.
In short, this is no rocket science, has nothing to do with html5 nor soundmanager2. For more info you should use the .htaccess and jquery tag.