HTML 5: Accessing local file system mp3 from a website - html

Nomally web browser would not allow a website to access the users local files. I came across locallinks plugin which allows the file:/// access from a webpage , however such file opens up in a different tab.
I wanted to create a player which already has information about the file location on a clients computers and would play the media file on being clicked.I have coded something like this
<audio controls="" id="player">
<source src="file:///home/vihaan/Music/001) Led Zeppelin - Stairway to Heaven.mp3" type="audio/mp3"/>
Your browser does not support html 5 audio
</audio>
I had assumed that installing that plugin would make this work ! I have also heard about NPAPI plugins. Would it be possible to create a plugin which after the webpage gets loaded allows reading a file into the webpage i.e playmusic from a users computer without the user actually have to select the folder every time. Thanks

It would absolutely be possible to do this with an NPAPI plugin; it would most likely be a very, very bad idea.
There is a reason that browsers have those security restrictions in place; if you allow your web page to read arbitrary data on a user's computer then suddenly any other website could just use your same plugin to do the same thing; and they might not be just reading music. Bare minimum you'd need some very careful restrictions on it, and even then you'd likely open up a security hole that you aren't aware of by accident. You don't want to be known as the creator of the plugin that allowed the next botnet to take over.

Related

how html5 <audio> tag is responded by web servers

Hi,
I developed a simple web server based on an open source C++ project.
In this web server there are a lot of wave files which I would like to show to web clients by using tag of HTML 5.
I added wave files like following sample in html files which are sent to web browsers.
<audio controls>
<source src = "sound.wav" type="audio/wave">
</audio>
But Now I would like to know how web servers handle tag and send stream data to web clients when web clients push play button.
I need to implement it from scratch in my web server.
I read a lot of posts but most of them just handle client side issues.
I need to deeply know how server side of a request is handled.
Best Regards
AS you can see in MDN doc https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
The HTML element is used to embed sound content in documents.
It may contain one or more audio sources, represented using the src
attribute or the element; the browser will choose the most
suitable one.
The stream is not send to web clients when web clients push play button but is send when the page is loaded (lile all the media in a web page)
you can control the execution using some attribute like :
autoplay
A Boolean attribute; if specified (even if the value is "false"!),
the audio will automatically begin playback as soon as it can do so, without waiting for the entire audio file to finish downloading.
buffered
An attribute you can read to determine which time ranges of the media have been buffered.
This attribute contains a TimeRanges object.
preload
This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values:
none: indicates that the audio should not be preloaded;
metadata: indicates that only audio metadata (e.g. length) is fetched;
auto: indicates that the whole audio file could be downloaded, even if the user is not expected to use it;
the empty string: synonym of the auto value.
Serving a file is something I bet you already know. To serve audio streaming, there are streaming protocols. One is ShoutCast and here you have a nice example in Python.
https://github.com/inforichland/PyCast

uploaded video only audio is displayed

I am trying to upload an MP4 file. But with this specefic file only the sound content is displayed.
With all my other videos there is no problem only with this specefic one.
i found the following SO question:
HTML5 video of type video/mp4 playing audio only
Where he suggest to find a converter.
Does anyone know if this could be the problem and how do i secure that regardless of what video my user uploads that it will always be able to play?
Yes, this can be a problem.
You have not written about your server limitations, so if you have the possibility to execute converters (like ffmpeg) then this is the best solution. This way you can also guarantee fixed resolution, framerate and various other properties, and your server won't eat up all the space if someone uploads a 2GB video... (Users can be dumb sometimes.)
If you cannot run ffmpeg on the server then try reading some about how can you detect codecs on your server, in the language you use, etc. Then, if you still want to, post a specific question.
Also try opening your videoplayer page with different browsers (Chrome, FF, IE at least). They might not support the codecs the same way.

Using phonegap and html5 video tag: caveats?

I am planning to build a JavaScript/HTML5 app, and wrap it with phonegap to be installed on an android tablet.
In it, I want to show a video file.
Is it just a matter of creating an index.html file, and putting a mymov.ogv file in the same directory, and then using:
<video src="mymov.ogv"...>
and it will work on Android?
I have read about some problems with this, but my quest got me confused.
What are the caveats, if any?
PS: the video should be packaged within phonegap, such that the video is shown when the app is not connected to wifi. So it's a local file.
PPS: Since it's for internal use, I am able to choose a particular modern android version (if that makes any difference). There is no need to support old android versions whatsoever.
According to this resource: http://caniuse.com/ogv There is not support for ogv format in Android. Remember that Phonegap applications are just display in a rapped browser window-- So if the browser doesn't support it, you can't use it. Whether the video is on-board the device or streamed, doesn't matter.
You can certainly embed with the tag, but you might want to use the associated Javascript API to provide some control over the video.

Web browser offline application cache with video files?

I am trying to make a site available offline in a web browser (specifically: Mobile Safari and/or Google Chrome), using a manifest file to load the offline content into the application cache.
This works just fine for images, html content and even font files. But not so for the videos I am trying to store. Mobile Safari is asking to increase storage to 50MB (just as it should) to accomodate the videos, but when going offline the videos are not displayed. All in all the cached content amounts to 37MB.
I am using JWPlayer to show the videos (setting the HTML5 player version as the preferred player), but I have also tried the HTML5 video tag on its own to no avail. The JWPlayer is returning the "Could not load video file" message, just as if the URL was invalid, when going offline (but they work fine online). The videos are H264 encoded in MP4 containers.
Is Mobile Safari on iPad at all capable of storing and retrieving MP4 (or other video) files? Is there any special trick that needs to be employed?
The problem is that Safari itself doesn't play the videos. They're played by the QuickTime plugin, which ignores the browser's caches. See this article.
I don't know of any workaround (other than PhoneGap etc.), but I would certainly love to have one!
You could not use the JWplayer in offline (at least with your current version). In their script (swf), it is fetching some external script from their server (include their logo) such as
http://p.jwpcdn.com/ ... /jwpsrv_frq.js
http://p.jwpcdn.com/...../jwpsrv.js
http://p.jwpcdn.com/...../logo.png (JwPlayer text)
I think it's all about their authorization and license checking. It would take you an amount to get away that logo for the paid version, they may ask your domain and they will add it into their list of the customer's valid website domain, and they also give you a script in the static link and you can add it into your cache file.

Link directly to video and nothing happens

I'm not sure why I thought the file should be handled by the browser (chrome in my case) and then do something (for chrome I think its use QuickTime to play) but instead I just get an untitled browser title, and the page doesn't actually load, as if its loading an empty html page
anyway the address is:
www.motionvideos.tv/video/1022_market_review_february_2012_taylors.mp4
Other details which may effect it:
The site uses WordPress, which is currently not functioning, due to someone's fiddling, and will be down for a day or so (stupid zeus server redirects)
The video is just under 9MB.
Possible causes?
This link is for video download.
Do you want it to show on page?
If so you need to open a HTML page to embed this in.
This is how you embed it via code:
http://www.mediacollege.com/video/format/mpeg4/streaming/example.html
For WP you`ll need to open up a post and use a dedicated plugin for embedding.
Also, you should know that :
MP4 is not a universally common codec - some users (many?) will not be able to view it
The file itself will load directly from the server, thus noticeably effecting total bandwidth usage (can reflect on site speed, hosting costs and etc)
Also not all hosters support (by default) media hosting. This got a lot to do with above mentioned bandwidth issue.
I would suggest re-coding to more common codec + using 3-rd party provider
(I.E. Flash + Youtube for one is a popular choice but you can also go with AVI + Media Hosting Provider X)
Hope this helps.