Can we securely serve content (video/images) if player is HTML5? - html

I have a custom multi-media player written in silverlight which displays both images and video. As you can guess, lot of people do not have silverlight and want us to use a better tech.
I am keen on HTML5, but then few concerns:
How do i avoid users to download content to their local machines? I just want them to stream from servers when they want to view it.
How do i avoid users to copy paste all the player code, as its just HTML/JS?
Is there a way we can do adaptive streaming in HTML5?

The answers to your concerns are:
You can't
You can't
If you mean like RTMP, there's no support currently
If these are your primary concerns, then HTML5 video is not the solution you are looking for. You may find this mailing list thread interesting, just one of many times the issue has been raised but with some nice long explanations.

Related

Getting from OBS/Xsplit to HTML5

I am but a meager systems guy and this seems to be a programmer's domain so be gentle. This is my first post on this site.
I work at a high school and for our presentation software for announcements and such we use XSplit. This is similar to OBS and allows us to use a green screen. To share it with the rest of the users on the network, XSplit has a built in webserver which lets users visit a persistent URL and view the the live stream in Flash.
Since Flash is now slowly being shunned by Chrome and will likely go that way with all browsers, the logical next step for anything using Flash seems to be to get to HTML5.
So here I am, trying to get from Point A (OBS/XSplit/presentation software), to Point B (HTML5 code on a website doing .
OBS and XSplit can be output to existing streaming services like Twitch, YouTube, etc. but these lack certain privacy requirements, or persistent url requirements we have. Alternatively you can output to RTMP, but this of course cannot be fed directly into HTML5.
I believe I have to get my RTMP stream somehow converted into something else before I can plug it into HTML5, but not sure what the best thing to use is, and how much coding I would have to do, as I am not a coder.
There is another thread on this, but doesn't have a whole lot of info for dummies like me. Has anyone here successfully accomplished what I'm describing? Or know of a tutorial for this adventure?
Thanks
This will be difficult to do without a coding background, or budget to use a commercial product. What you need to do however is set up and nginx server with the rtmp module, use that to convert rtmp to dash, then use something like dash.js, to build a web player. There are may places online that describe how to do this.
Alright, well, I figured it out. It's probably not the cleanest way to do it, but it's a 'for dummies' way of doing it without having to get into too much coding/command line. Here it is for anyone who lacks coding skill but would like to accomplish what I was asking about:
First of all follow this guide https://obsproject.com/forum/resources/how-to-set-up-your-own-private-rtmp-server-using-nginx.50/ to get to the point where you have your OBS/XSplit type software viewable as rtmp://yourip in VLC
In VLC, using the Stream feature where you pick your rtmp://yourip as your source, and HTTP as the destination, and Theora + Vorbis (OGG) as your selection for the stream to be transcoded to.
Simply take your new http://yourip:8080 stream and plunk it into a
video width="720" src="http://yourip:8080" autoplay
type="video/ogg; codes=theora" /video" or something similar and you should be able to play it in Chrome, at least. (Dunno how to post that with the < things)
I'm sure there's some optimization to be done but seems to play pretty well.
Again, probably better ways to do it especially if you're dealing with people using different browsers/mobile devices, etc. But for my purposes where I just need to get a bunch of people on a local network using Chrome to view a stream which isn't Flash based, this does the trick.

What "timeline" technology is being referenced in the Google/Arcade Fire Video Experiment?

In the really cool video at http://www.thewildernessdowntown.com/, what exactly is being done here to keep all the videos/activity perfectly synchronized to the audio?
I'm having trouble finding good details on exactly what kinds of syncing are actually possible via HTML5. I would like to synchronize some videos, audio tracks, and HTML overlays together, and I'm wondering what the best approach is for getting a solid timeline that will drop frames, client-side.
I am guessing its in HTML5 and Javascript. In HTML5, you can use what are called "cuepoints" to trigger certain events. Basically, you say something like "at this timestamp in the video, trigger this event". At my place of employment, these cuepoints can be embedded as metadata in the media file, and read as they are decoded. This is a heavy approach, but could be doable if you had the time and the tools.
However, for most web applications, I would suggest using Javascript, specifically the libraries here(cuepoint.js; more for subtitles) or here(popcorn.js). Either might come in handy for your application.
In Regular HTML5, there is a spec for specifying cuepoint data, but that is still in flux and YMMV in different browsers and environments.

Choosing a technology... why not Flash?

I want to make a site from scratch, and Im considering to use Flex to make a R.I.A instead of the standard approach (xhtml + css + some ajax).
The kind of site I want to make is something like e-bay, but less complicated.
But.. I know that 95%+ of the sites like that are built in the previous mentioned techs... so, what are the cons and pros if I want to make a pure Flex site?
Thx.
If you write an entire website in Flash, the entire website lives at one URL. (Short of mucking around with whatever Flash provides to let you offer deeper links.)
Whereas a website written in HTML, unless you go mad with your AJAX, lets people link to the stuff they’re actually interested in, like unicorns:
http://cgi.ebay.co.uk/DESPICABLE-ME-AGNES-Unicorn-Doll-Plush-Character-Doll-/180602861597?pt=LH_DefaultDomain_0&hash=item2a0cc4f81d#ht_1755wt_907
Or for a non-eBay example, Stack Overflow questions:
Flash for business web applications - why not?
HTML also has a pretty standard and understood user interface: links, and form controls. (Mainly links.)
Flash doesn't work on iPhone/iPad. End of story.
Other reasons: not a web standard, often quite slow, not good for SEO, etc.
It requires users to have a proprietary plugin which some users don't want and other users can't have (since isn't available for all platforms (iOS being a key example)).
It also has performance and stability issues on some platforms (OS X and Linux being prime candidates).
While some search engines have started to index Flash content (so long as it exposes the information), the results aren't as good as for content rich HTML sites.
You can do that simply using traditional xhtml + css + jQuery (or any JS framework if you want to increase UX). Flex won't do much in your scenario.
In my experience, performance is not a real issue unless you play video - one can write bad programs in JavaScript, too...
Your pros are mostly on the development side: You can have a great looking site quickly, and you can almost completely forget about browser incompatibilites.
You rely on the customers having the plugin installed, though, and you rely on Adobe's technology for development and playing of the content.
If this is not important to you, and you can afford to do without all iPhone and iPad users, accessibility and standards compliance... go for it!
Flex is good if you want to install as an application using Air. ebay actually has a RIA version, or at least they did for a while.
There are several concerns with a Flash site, some of which Adobe has addressed in the last couple of years.
One is accessibility. It is more difficult to make a Flash site accessible to the visually impaired, who use screenreaders.
Related, people like to be able to copy and paste content, as well as print. With standard web pages, the developer need do nothing to support this, it just works from the browser. With Flash, you'll have to take care to make your text content selectable, and I'm not sure a user could ever select a section of text + images. I've never done it, but I can only imagine that implementing printing ability in your Flash site would be nightmarish, at best.
Another is linking and addressability. For most sites, you can copy or at least get a link that you can share or save to get back to where you want to be. With Flash, you usually go to a single address and then the rest of of your experience happens inside the Flash "window" and the browser isn't actually navigating any pages. It is far more difficult to implement this ability in a Flash site.
A Flash site is usually very slow to load, especially the first time, and page load times are immeasurably important to a site's success.
Finally, you've perhaps heard the furor over the last couple of years about different vendors supporting or not supporting Flash in their products/devices. An all-flash site would be completely inaccessible on any iPhone or iPad, for example, which do not support Flash at all. Furthermore, some employers do not allow plugins like Flash to be installed on work machines, so you'd eliminate that portion of possible traffic, as well.
Nobody has yet mentioned Silverlight.?
I mostly agree with Jay's answer concerning accessibility, but as a further note would like to add that development in Flex/Flash vs HTML/CSS/JS could be more costly not only in terms of money but also for maintenance. Many Flex/Flash devs typically charge a higher price and their dev tools, which are necessary for compilation, usually aren't free, compared to HTML/CSS/JS devs, who often use freely available text editors.

Can you make an embedded MP3 keep playing from where it left off?

Is it possible to make an mp3, that is embedded in a webpage, keep playing from where it left off if the page is reloaded? Perhaps into a cookie or with any other method.
<embed src="track1.mp3"></embed>
For example:
track1.mp3 is embedded in a webpage; it is 3 minutes long. A visitor loads the webpage and listens to the first 1 minute and 25 seconds of the track; then closes the webpage. Can I make track1.mp3 start playing from 1 minute and 25 seconds the next time that person visits the webpage?
I have seen one Flash-based MP3 player providing an approach to do this, with only a minimal disruption when switching between pages, but can't for the life of me find the project with any search term that comes to mind. (The big word was "seamless playback"). Anyway, it was a discontinued project, the last update being sometime in 2006 so it wouldn't probably be much use on the long term.
But nowadays, with every man and their dog having a JavaScript-enabled browser, maybe changing your page's architecture to making it fetch new pages using Ajax is the better approach. It can be made degrade gracefully for non-JS browsers, and would allow for seamless playing without any tricks for JavaScript users (because the page is never reloaded).
See discussion about the pros and cons of the approach here: Why not just using ajax for Page Requests to load the page content?
And some pointers how to get started: JQuery/AJAX: Loading external DIVs using dynamic content
how is it embedded? With just html?...probably not. If you are using Flash, then yes, you could keep track of the bytes, and write to a session or cookie.
You might need to expound on your question a little, ie, what is the process that you are using.
I don't know of anyway to do this other than with Actionscript. I can't think of any Javascript methods that would allow you to access an embedded object like that. My recommendations for this would be to do it with Flash. If you don't have access to it, you can do it with Flex, which the SDK is free to download from Adobe.
HTML5 specifications have some promising new features for handling video and audio. I have not paid that much attention to that portion of it yet. I really don't think you are going to find a quick answer to this one.

What is so evil about a Flash based website?

I have the feeling that Flash-based ( or Silverlight-based) websites are generally frowned upon, except when you are creating games or multimedia-content rich applications. Why this is so?
Flash is infamous for its poor accessibility.
Keyboard navigation does not usually work, and Flash (up until recently) did not have search engine support.
Flash applications does not work in mobile phones and other portable devices.
Flash is not there in the iPhone!!!
Flash is controlled by a single company (Adobe) and so it is not following any well defined standards for the Internet.
The beauty of Internet lies in the fact that you can always view the source code of any website you are in. This way you can use the same programming/design techniques in your website or you can find security flaws in the web application. This is not possible in Flash. In Flash, source code is closed.
The big question is, why should you use Flash "except when you are creating games or multimedia-content rich applications"?
jtyost2 says,
"I would also add that you can't directly link to any content inside of a Flash site, thus breaking one of the major factors that makes the Internet, the Internet, links."
content weight
usability
crawlability of search engine bots
accessibility
ease of use (disputable)
technology encumbrance (added software required to access the site)
security issues (needing to add software comes with issues involved with installing or running that software/player of the content)
[Edit] Why I place usability and ease of use separate is best explained in this link
Usability:
a result – software that is usable;
a process, also called user-centered design, for creating usable software;
a set of techniques, such as contextual observation and usability
testing, used to achieve that result;
or
a philosophy of designing to meet user needs?
Ease of use:
Effective
Efficient
Engaging
Error Tolerant
Easy to Learn
I agree with the comments on that site, but this is all debatable...could be a good stackoverflow question: is usability and ease of use the same? IMO part of usability is ease of use and vice versa, but they are not necessarily the same.
I hope I don't enfuriate the more semantical sensitive with this edit :-)
Interestingly everyone here blasts Flash/Silverlight and you would do well to recognise that this is only one side of the coin.
Flash (and Flex) allow web site designers significantly more flexibility and richer content for their site and this works in a variety of situations - e.g. sites relating to movies, or bands, sites for kids, sites for games etc.
Certainly, there are many reasons to not choose Flash/Flex/Silverlight, but one can do sites just as inaccessible in JavaScript these days. I have previously worked with JavaScript products that have no reasonable usability by blind people, or web crawlers.
Flash penetration (from a biased source to be sure) is 99%+ (http://www.adobe.com/products/player_census/flashplayer/version_penetration.html), which means that those that say "would never visit a Flash site" are in the 1% of the population that do no install Flash, do not watch YouTube or movie trailers online.
So, you need to be mindful of your audience. Certain audiences and situations would definitely be better off with plain HTML pages and a minimum of JavaScript (government websites, programming websites are two areas that spring to mind). Other times it is because the audience are office workers that are not allowed to install Flash in the browsers.
Rich Internet Applications (RIA) is one area where there is a distinct clash/struggle between the Flex/Silverlight and JavaScript/CSS/HTML sides. I've worked with both, and I'm now of the opinion that requiring Flex/Silverlight plug-ins is fairly reasonable, though you can still lose some visitors if the application is public.
In summary - you're best to identify your audience, identify what they're willing/able to use and then based on such limitations decide on your technology.
Flash and Silverlight based sites typically go against basic Internet conventions with their closed models.
For example, most Flash & Silverlight based sites:
Ignore the back/fwd button.
Don't allow you to send anyone a URL to a specific place on the site, or bookmark a specific spot for later via your browser
Place the internet in a fixed size box. No dynamic sizing for wider monitors or higher resolutions.
"I was about to click checkout but I wanted to change something so I hit the back button"
In this next rant s/Flash/Flash or Silverlight/g
The Flash application/plugin is a closed source pot of serious undisclosed security holes that expose private data, allow modification of arbitrary files on your hard disk, etc.
Flash files are enormous for basic content. There are more efficient ways of doing things
Flash is slow. The plugin on my Windows PC can hog 100% of the CPU time to play some shitty websites.
Flash is non-standard. There isn't a supported flash plugin installed everywhere. Linux users can't run it without jumping through package management hoops. Firefox users on Windows don't get it by default (well didn't last I checked).
Flash is annoying; your users don't want to be bombarded by animations and jingles and junk just to get some basic information.
No back/forward functions unless the Flash designer wanted to implement them in
Can't view a single page without waiting for all the content/scripts that make up that "page" to load. That's really quite painful if all your user wants is a slice of text and you force the multimedia down their throat.
Most Flash-only sites are really bad; the designers seem more concerned with using all of the features of the flash engine rather than presenting something that's concise and useful to the user.
I am a Flash developer. The firm I work for has no difficulty finding clients who want us to build Flash-based products for them. There is a certain set of applications which it is much easier to develop in Flash than in other environments I have used.
But Flash has its problems. Some above have complained that Flash apps do not include keyboard support. Others say it is because the developers are too lazy to implement it. The truth is that many of the components that come standard with Flash are buggy. At my firm we have had to write our own replacements. One feature that is problematic is keyboard support. I implemented my own support for keyboard interaction. It works well, but required effort. If I were writing a Windows VB app, the keyboard navigation would be provided and would work well out of the box.
The same is true for deep-linking, back-button support, etc. A clever developer will be able to make a Flash app behave well. Some open source libraries are indispensable here.
As for flowing layouts, I just completed a proof-of-concept for this (in AS3) as well. It is possible, but requires much effort. Why do I make the effort? Because of the other things that Flash does well.
My biggest gripe with Flash is that it takes you "out of the browser" into its own totally separate application. This breaks "browser standards" - i.e. the functions I can do in my browser:
Right click
Middle click (for opening links in other tabs)
Selecting text
Copy & paste
Printing
Keyboard shortcuts (since Flash steals keyboard focus)
Back/Forward buttons and the whole "page" concept
Javascript interaction with other elements on the page (I don't think this is possible).
"Inspect element" in Firebug or Chrome, if I wanted to see the source of a particular part of the Flash file, or find the image being used.
Flash has its uses. It's good for content, not webpages.
Printing is often poorly supported and the backbutton does not work.
I think it's a matter of selecting the lowest cost medium to reach your target audience,
be it Flash or Silverlight or JavaScript or plain text.
You can have text-only, JavaScript-only, etc. versions of your site if you have the
money, and your target audience come with different prioritizes.
So my question to you would be: does your website has people who frown on Flash as its target audience? If yes, you need to stay away from it. If not, use anything to give your
visitors a good experience.
SEO is the prime issue. Still Flash is not crawlable. But Adobe is working on it.http://www.adobe.com/devnet/flashplayer/articles/swf_searchability.html for better swf indexing.
Does anybody know a site called YouTube? It wouldn't exist without flash. Flash has great video/multimedia capabilities that simply cannot be ignored.
Flash is amazing when used in the proper way, in appropriate circumstances and when the designer/coder has taken care to embed basic accessibility features.
The thing is, like all good things, there's a lot of abusive use (flashturbation). Especially in the beginning, when people just want to slap Flash wherever they can just to show off.
But I strongly disagree that Flash sites are bad: When made properly, and with good UI design and accessibility, they bring a whole new dimension to the web.
See Steve Jobs' Thoughts on Flash: http://www.apple.com/hotnews/thoughts-on-flash/
Let us not forget that Flash allows web sites to display video, animation, user interaction, etc., and it allows this to be a simple process or a geeky techie one, depending on what you want to do. Many bad Flash sites are down to the author.
If YOU don't like Flash then the answer is simple, don't use it. Don't install the Flash plug-in, or install a browser plug-in such as Flashblock on Firefox. This replaces any Flash movie with a play button, preventing and download until it is clicked.
Better than that though, if you don't like the solution that Adobe or Microsoft are giving you, then come up with a better one, or at least let them know what you don't like, they do take feedback seriously. Support some of the people who campaign for accessibility improvements in Flash, for example visit http://niquimerret.com.
Accessibility is an ongoing issue and not one that will go away, Flash accessibility is improving for people with physical disabilities. In in some cases the use of Flash enhances the experience for people with cognitive and learning disabilities, when an concept or idea is better explained when presented as an animation rather than a page of words and static images.
Flash adds another heavyweight component that's required to properly view a web page. The flash plugins are often buggy and can crash a browser. Flash pages often are used to make cutesy animations and other things that make it harder to quickly navigate a site.
All of the above is true for the wild wild web.
However, for internal business applications, Flash and Silverlight allow the user to have something close to a fully-fledged application in their browser. Accessibility, SEO, and closed source are not very important in an internal application. All that matters is making the user's life easier.
I dislike Flash based websites because what happens if your browser crash or your connection dies for a bit? You have to load it again and go back to the menu, and select the item you wanted to read about, and so on and so forth.
Just don't do it. :S
I don't install Flash on my browsers, mainly to escape the nuisance of animated ads, but also for all the security and privacy reasons mentioned by others.
So sites done completely in Flash are nonexistent as far as I'm concerned. (W.r.t. Youtube, I download videos directly into Miro.)
Probably for the same reason C programmers shied away from Win32 API, Win32 programmers from MFC and MFC programmers from Windows Forms. It's tricky to use and understand - I have tried programming in Flex and am getting along pretty well but it is not inherently designed for typical web application design e.g. there is no native (at least until Flex 3) support for databases or cookies or sessions - you need to put all 3 in PHP or another server-side page and call that from ActionScript.
Try making a simple register/login page with PHP and then again with Flex/Flash and you will see that all the server side crunching is done by someone else - again, this is probably by design since we have HTML/JavaScript for the front-end mixed with ColdFusion or PHP etc. for back-end in "traditional" web applications.
Like started by other people, Flash is bad with the keyboard - try pressing Ctrl-T in Firefox when a Flash object embedded in an HTML page has focus (mouse-over) - so that can be frustrating for the user...
Having said all that, I would still rather make a web application front-end in Flash/Flex than HTML/JavaScript/CSS since the latter needs a sharp learning curve that gets quite bewildering after a while since you have to account for the "good" design aspects of CSS and JavaScript and the bad ones too - and also the peccadilloes that JavaScript/CSS inherently have and those which are introduced by the JavaScript library vendor (Yahoo's YUI, Google's Ajax API, script.aculo.us, etc.
If you are already a web programmer who knows CSS/HTML/JavaScript very well and have a good development environment set up on your PC with all required code inspectors and runtime debuggers etc. etc. then it's easy to keep on working in that (not taking into account end-user preferences) but if you are like me and want to make a web application ready and available for use quickly and want to add features to it quickly while making it pretty all the time, then Flash/Flex is a better option, IMHO.
I am a Flash developer.. and I have found that although Flash requires more effort in coding, the potential is enormous. You can create very simple sites with simple transitions, so subtle it would seem to be a normal HTML page, while still being just as light.
At the same time, you can use OOP with ActionScript to create a website that is as complex and as inclusive, as well as feels and acts like a desktop application. WHILE ALSO REMAINING VERY LIGHT! (only the content required is loaded on demand, as apposed to 4 column HTML sites with far too much information.)
Nowadays, and this is still without migrating to ActionScript 3, but still using ActionScript 2, MY flash files contain simply 2 or 3 lines of ActionScript, only one frame, and an empty stage. Everything else is dynamically created or added at runtime.
Flash's problems are not about Flash, but about lazy development.
In its defence, most of the issues raised here about how people have implemented Flash in their websites, not about Flash itself. Flash does support accessibility it's just that most people don't consider it when building their sites. Flash does work on mobile phones - it's Flash Lite, although the ActionScript is limited in earlier versions.
Why should anyone have an automatic right to view the source code of a website?
A web author has spent time and effort dreaming up their code to share their ideas through the medium of the web. If you want to know how something works, why not put a bit of effort in yourself, and work it out? The beauty of the web is the message, not the medium.
So what if Flash is owned by a single company - Adobe bought it for a reason, and that's because it's a fantastic bit of kit. The problem comes from web authors not using it properly, trying to make it do things it was never intended to, or simply not applying standards to their sites when developing using Flash.
What is so evil about a Flash based website? Absolutely nothing.
It's like asking what is so evil about a gun. Nothing. It's the idiot wielding it that has the problem.
Flash sucks and I refuse to visit Flash-based web sites. Why? Because I can't. Why? Because Adobe is too ignorant to write a plugin for a 64-bit browser.
Look at any major car maker's website, they are ALL in Flash. It depends on what you are doing. If your goal is to provide a rich, sexy website Flash/Silverlight will give you a huge advantage in terms of development time. IF you are providing content/data HTML and JavaScript (jQuery for example) can give you a lot of whizbang without requiring additional software plug-ins (Flash/Silverlight).
Flash Player is the culprit behind more Mac OS X crashes than anything else. It's not exactly well-known for its stability.
All the above answers are focusing on Flash, Silverlight is just as bad or worse. If you are running Firefox with NoScript (you should be) then you have to click on every script that you wish to allow to run.
So build your websites with scripts, Flash and Silverlight. Just make sure that they still work with them disabled. Many of us will simply move on when we open a site and see nothing.
Many of us have had bad experiences with Flash based websites which has propagated the idea that flash is "evil". I don't really think it's fair to apply the label of evil to any technology or framework, they are each designed to cater to specific scenarios and many of them do well in those scenarios, for example, I have no problem with websites that use flash video.
A few other responses have touched on the fact that the use of flash contradicts many of the standard metaphors we use on the internet (e.g. links and navigation buttons), I hate this as much as the next web user but this doesn't really make flash evil either.
While it has been said that there are mechanisms within Flash/Flex to add support for these things, in my experience these are rarely implemented, which is not directly the fault of Flash per se, but is very annoying for the user.
Perhaps the evil is not Flash/Flex but Adobe for not making many of these things easier or more visible to developers.
For the record I have never developed in Flash
Flash isn't evil, it's what people do with it that's evil.
For goofy vector animations and maybe even for example a 360 product view or interactive diagram, yes. Flash can do beautiful Full HD animation on my ancient box # 60 fps using ~15 % cpu.
For web video, if you have no other choice, I suppose.
But for entire websites and these things called 'RIA's, no.
So shockingly a technology works better for the thing that it was designed to do.
Flash is one more stuff to learn in web development. No thanks!
There are just too many already. If I can do my job without it, I don't need it.
Programming is being paid less every day.