How to develop offline support website? - html

I want to give offline support to website so user can access website even in absence of internet as of offline Gmail.
Please suggest technology?
Ans: HTML5 is the answer for this. I hv added detailed answer below.
Thanks,

Take a look at HTML5 Application Cache: http://www.html5rocks.com/en/tutorials/appcache/beginner/. Note that this is not yet a cross-browser technology and will not work in older browsers.

HTML5 is the answer for this. In HTML5 using LocalStorage and Tag.
Attribute offline script Triggers when the document goes offline and after that you can server content from localstorage.
more on web_storage http://www.w3schools.com/html/html5_webstorage.asp
Edited:
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
http://www.html5rocks.com/en/tutorials/service-worker/introduction/

Related

Best way of posting a video to a html website

I want to post some mp4 videos in my site and I don't want to upload it to youtube or any 3rd party web app which will let me embed it into my website. I also don't want to use any blogging system like wordpress, drupal. So then what is the best way to post it to my site so that most devices will be able to view it. And can I customize the player which I use?
I have seen w3schools html5 video but I didn't find it helpful. I have also seen ' Video onto a website without plugins ' but I am not satisfied with that.
[Hint: I am ready to convert my video into any format required.]
Thanks in advance.
I have used video.js for this purpose, it worked for me. I haven't tried editing it much, but it has options.
http://www.videojs.com
Use the HTML 5 video element. You'll have to upload your video in different formats, since there is no video format that is supported by all browsers, but support for the video element itself is quite good. IE8 doesn't support it, but IE8 is already very old. With the video tag you don't need Javascript or flash plugins.
For an overview of browser support see CanIUse. Another source with much detailed information about video formats and how to convert them is DiveIntoHTML5.info.

Pure HTML5 videoconference

I want to make a single web application avoiding any flash code. This application must contain videoconference, and I want to implement it in pure HTML5. It is possible? I know about websockets, but don't know really if videoconference can be implemented through them with a relative performance (at least, 24fps + sound at a right resolution, minimum 640x480), and both endpoints being web apps (both endpoints should use browser).
Thanks in advance
Anyone following up this question - on Feb 4th, 2013 they produced the solution with WEBRTC in Chrome and Firefox. For examples see https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/ or http://www.html5rocks.com/en/tutorials/webrtc/basics/ or https://code.google.com/p/sipservlets/wiki/HTML5WebRTCVideoApplication
You can't really use HTML5 video for live streaming at the moment, and it doesn't have support for web cams yet.
Ericsson has modyfied a WebKit browser and is showing how this can be done with hopfully upcoming HTML5 Stream API. See Beyond HTML5 - Implementing and stream management in WebKit
It is impossible to capture web-cam images/microphone feed just through JavaScript (although there are plug-ins which let you handle output through flash), so it would be necessary for you to have some kind of application/plug-in installed.
The speed part is just for the client to worry. I mean, web sockets will be as fast as the connection permits.
You should do some research about web workers, since they would be very useful for speeding up your application (you could have microphone interface, web-cam interface and UI all with their particular worker, thus never blocking the application or rendering it unresponsive).
EDIT: the aforementioned jQuery plug-in works through the use of <canvas>.
As Jonas said, according to the situations now, we can't build video conference with HTML5. There are many limitations with browsers also. As there is no common video codec supported by all browsers. And live-streaming is also properly supported by safari only(using HTML5 video tag). As per my experience we can't build live-streaming on windows with any browser properly.
But if you wanna get some information about live streaming see https://developer.apple.com/library/archive/documentation/NetworkingInternet/Conceptual/StreamingMediaGuide/Introduction/Introduction.html
you can use this source to test your live-streaming examples
"http://xfunoonx.api.channel.livestream.com/3.0/playlist.m3u8"
This content will work only with safari on Mac.

HTML5 and RTSP to develop a browser based web conference app

Greetings to you all!
I want to develop an application that would be able to hold web conference without the users having to download any installable files. After doing some research I have found that flash is perhaps the only option I might have as JMF needs access to registries.
I would like to know if you have any suggestions.
Is it possible to use RTSP with HTML5 to develop the required application.
P.S The application shall be free for all, so I hope you would take the pain to answer. Thanks in advance!
In theory, yes, but is it browser specific.
HTML 5's <video> tag is protocol agnostic—it will not care what you have there. You place the protocol in the src attribute as part of the URL. E.g.:
<video src="rtp://myserver.com/path/to/stream">
Your browser does not support the VIDEO tag and/or RTP streams.
</video>
The problem is that the implementation of the <video> tag is browser specific. Since it is still early days for HTML 5, I expect frequently changing support (or lack of support).
And then you still have to worry about browser specific CODEC support! Flash is, at least today, the "more universal" approach--you'll cover a larger percentage of the web browsing public.
My suggestion is to either
User Flex/Flash
Become an expert on web browsers and enjoy coding on the bleeding edge

Does HTML5 audio tag support serving mp3s from another domain?

So I am having a web application with domian "www.example.com" that needs to serve audio from "www.example2.com", but for some reason this is not working (the audio just does not stream)
<audio src="http://www.example2.com/song.mp3" controls preload></audio>
Given that if I put the sound source url directly into the browser the audio will be available
Anyone tried this? thanks
Wa'el
Apparently I cannot vote up CyberK's response (don't have the reputation yet to do so) but I agree with him. You cannot do <audio> or <video> cross-domain. I have tried this exact thing on both Chrome and Firefox. There are more than a couple of articles about this. Finding this out for myself today; not happy with the restriction.
http://www.bluishcoder.co.nz/2008/11/video-audio-and-cross-domain-usage.html
I think HTML5 does not allow you to take a source from another hosting provider / server. Maybe it's limited to your domain but I'm not 100% sure... I do remind that there was a little limitation about this html5 element...
You would need to do some tests but I reckon that it does work, but you may have difficulties with certain actions and queries
Example, you may be able to start/pause/stop but not check the title or the length since that could be a form of XSS
FF and Chrome do not support it, but the IE11 do.
I think W3C should have an solution about cross domain, after all it is a completely reasonable request.

Is there a way to use DRM on HTML5 video?

Since Flash is losing ground I would like to know if there are ways to protect html5 videos with DRM (H264, .ogg and WebM).
On the W3C FAQ on HTML5 it states:
Is there support for digital rights management (DRM) in HTML5 video?
HTML5 doesn't provide direct support, nor any barrier, to using DRM in video. It currently expects this to be handled by the particular codec/implementation. There are implementations which allow for DRM in HTML5 video.
Is dealing with DRM in scope for HTML5?
If enough stakeholders want to standardise some aspect of handling DRM in HTML5 itself as part of the inclusion of video and audio media, then it makes sense for W3C to help standardise an approach which meets the needs of the market. However like all W3C work, relevant stakeholders need to be and show they are committed to developing it rather than expecting it to happen on its own.
Which means it's currently not supported, but there has been a discussion about it on the W3C bug tracker here.
Update:
People interested in this subject might want to consult the working draft of the new encrypted media extension standard.
Updated: EME is currently supported in major browsers.
It does now.
https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html
Here is an example.
http://www.html5rocks.com/en/tutorials/eme/basics/
This is the best page that I could find on current browser support.
http://www.jwplayer.com/html5/mediasource/
At the time of writing this, EME is supported in
IE11 in Win8.1
Chrome (Desktop and mobile)
Safari 8 in OSX Yosemite
Probably not, even though there's an EME DRM plug-in interface.
Some browsers now support another type of a plug-in called EME (Encrypted Media Extension CDM) for vendor-specific DRM implementations such as Microsoft PlayReady, Google WideVine, Apple FairPlay, etc.
However, the only part of it that is a public standard is a JS API that launches a vendor-specific EME plug-in.
The actual DRM API required to make use of it is vendor-specific, secret and proprietary. To have working DRM across browsers you will have to sign separate contracts with Adobe, Microsoft, Google and Apple (which may be difficult if you're not Netflix).
Consider abandoning idea of DRM, as it's more likely to backfire than protect the content.
This is an updated answer, comments don't make sense any more
Already in chrome.
Here is a running example using it.
Widewine provides video DRM for HTML5 and h.264. Recently, another company Haihaisoft said they released HTML5 DRM for MP4 and WebM video: . It doesn't need Flash anymore. You might try it online. HTML5 Demo in Xvast browser DRM-X 4.0 in the news
You could implement some kind of encryption scheme with public/private key - I recently heard about http://www.widevine.com/ who seem to be doing something like that for html5 and h.264 . But I am not aware of anyone having applied to web video in general.
Sure you can stop someone from downloading the file simply by not giving them permission to download anything from certain folders on your server. Maybe there is something I am missing here. Seems like that would be a relatively easy solution.