Been having trouble with YouTube lately with regards to autoplay, looping and playlists. Currently using the AS3 embedded player and it was working fine until recently when autoplay and playlist options became mutually exclusive. I am also finding the loop option doesn't work with autoplay.
So, looking at options other than YouTube as we will have access to the video anyway and can either upload or stream using whatever technology is appropriate. My application is for touchscreen interactive kiosks which will be largely unattended and I want to be able to run embedded video with all controls turned off to prevent anyone from jumping off to some other website at any point. This is crucial! I don't mind if a touch can pause the video like it does with YouTube but links must not be available to jump out.
My web app is written in Rails 3 with HTML, CSS3 and JQuery where required. It runs on IE8/9 on the kiosks and Safari mainly during development. I'm using Heroku.com for hosting.
Hopefully I've given enough background here to attract some good answers but please let me know if I've missed anything important.
Thanks for your time,
Craig.
This service is awesome in quality and price.
http://sublimevideo.net/
If you are using heroku for your hosting, you should take advantage of their add-on. The interface is super clean and you have full flexibility to mold playlists or behavior.
Panda Stream
http://addons.heroku.com/pandastream
Related
First, sorry because this is not an special code issue (I can play videos in iPhone), so I'm not attaching any of my code, but asking for technical solution.
I'm developing a mobile applicaton (and also a webapp) that plays videos which come from a Nde js server. At first I noticed that in Safari, you can only play videos from streaming (which is also the best practice in the rest of the browsers), but it was very slow (so much time loading the video).
I came accross this piece of code, and the post of the author, it helped me to improve my server side streaming code:
https://github.com/davidgatti/How-to-Stream-Movies-using-NodeJS/blob/master/routes/video.js
I didn't need to change anything in the webapp, but now I can play videos much faster in Mac/Safari (in HTML5 I have simple tags).
But nothing changed in the Ionic app... And I don't know how to follow or where the problem could be (ionic/cordova or Node JS).
What can be the point I can be missing? Any link, known bug in ionic, or trick would help a lot.
UPDATE:
I'm trying with .mov and .mp4 video files. What's the ideal format (or compression) for iPhone?
UPDATE 2:
It's a good choice to handle videos with a cloud video solution like uStream, and embed it like an iframe (as provided solution from ustream)? Nothing more seem to work on improving time of load, managing videos on my own server and ionic client.
Thanks so much
So this will sound like a stupid question, but I notice that video from youtube works on pretty much all browsers without any setup work. However, use a security DVR or a IP camera, and suddenly you need a custom applet that is OS specific added to run it. Why does youtube just work everywhere? Because all the browser makers set it up by default? If the youtube video presentation method is so universal, why does not every video device use the same method/plugin as youtube?
Thanks.
YouTube doesn't "just" work everywhere. They have hundreds of engineers working to keep it working everywhere. They have several copies of each video that work on a sub set of platforms, and spend a lot of time making sure each platform works and continues to work.
For developing a video content heavy website like youtube which language/framework might be a better option from performance and support for video conversion/compression plugins point of view. Some points worth considering may be.
CPU vs I/O time
Support for compression/conversion plugin (existing mods/gems/libs)
Ease of learning is not very important though inputs are welcome
I know the question sounds a bit subjective however my intention is to understand the technicalities involved from someone who has had experience developing similar kind of site(s).
Unfortunately there isn't one or two APIs/Libraries/Frameworks you can knit together to produce a video serving website.
Invariably this will require heavy involvement on all levels of the stack:
Server back-end will require the following problems to be solved:
Video Encoding
FFMPEG or MPlayer experience for encoding any number of video formats to either FLV or more recent h264 for HTML5 supported formats
A reliable mechanism to transcode video in a background process; initially on one server but eventually on multiple servers as your services scales
Video resizing
Bandwidth Management to throttle connection just enough so that the video trickles down to the user
Storing video files and a file sharding and naming mechanism
API Server - Something like Rails, Django or NodeJS Express to serve as a JSON service layer between web clients and the video encoding/serving service.
Front end will require the following issues to be solved:
Playing back the video reliably across multiple OSes (Windows, OSX, Linux, Tablets, Mobile) and Platforms (IE, Chrome/Safari, Firefox, Opera) with fallback support for older browsers
DRM - are your videos free or commercial? If the latter, this is another issue that needs to be addressed
I'd strongly recommend an Event Driven system on your back-end as it is much easier to develop code that supports concurrency. NodeJS would be a good pick. It is worth looking at node-fluent-ffmpeg module for NodeJS as a good starting point.
As for your front-end I'd recommend frameworks such as Backbone.js or AngularJS to develop you web-app.
It was a fun and challenging journey when I attempted something similar a few years ago. I wish you good fortune in your journey.
For a site like that, I guess will need to choose several tools to do the job.
For the web, you could use any framework, so rails would be OK, to deal with videos you'll need something like ffmpeg or transconding to convert the videos.
For streaming, if you can use HTML5 check this question otherwise you'll need a player whith flash fallback.
Remember that the heavy part in terms of storage and CPU is video compressing/conversion.
I'm working on improving the experience of a site by adding in iPad support. This includes support for videos. Our client is pushing towards a YouTube model for storing and serving videos -- great for us! I originally planned to implement the use of YouTube's new HTML5-supporting <iframe> snippets. This offloads the device detection to YouTube and makes embedding a video a cinch as we don't need to worry about compatibility. It turns out the the CMS we're using, Sitecore CMS, strips out <iframe>'s from our WYSIWYG editor. After a lot of research it looks like its a bit hard to not make this happen.
Fast forward to now... I tested out the old style <embed> code and discovered even though iOS doesn't support Flash, these embeds seem to work fine on iPad. Some Stack Overflow research led me to this post which suggests its because of the YouTube plugin /System/Library/Internet Plug-Ins/YouTubePlugIn.webplugin on iPads that allows for the playback.
My question is, is there any documentation that this is the exact reason? I'd like to go by this as why we can use the regular <embed> code but I need to back it up with proof via a document for iOS. Is this YT plug-in on every iPad by default, or do users need to manually install it? This seems like a great solution considering our unfortunate incompatibility with an <iframe> but I need to support the use of the <embed>'s with hard facts. Thanks in advance.
The answer you are looking for is to be found in Apple's URL Scheme Reference. Basically it's a mechanism that comes into play on the iDevices to detect and handle specifically, certain types of URLs - for instance Google Maps, iTunes and also YouTube.
Here's a few reference links.
https://developer.apple.com/library/archive/featuredarticles/iPhoneURLScheme_Reference/Introduction/Introduction.html#//apple_ref/doc/uid/TP40007899
https://developer.apple.com/library/archive/featuredarticles/iPhoneURLScheme_Reference/YouTubeLinks/YouTubeLinks.html#//apple_ref/doc/uid/TP40007895-SW1
And just for good measure, you might also want to take a look at the Safari Developer Library for the best practice recommendations on HTML5 Video and Audio embedding :-)
I will be embedding a video to my asp.net mvc website.
A video on the homepage which will help people to better understand the website.
I have never done this. Can anyone tell me whats the best way of doing it.
Flash or silverlight??
I've used JW FLV Media Player. I was pretty happy with it, and it's easy to use. Flash-based.
http://www.longtailvideo.com/
My suggestion would be to go with Flash and to achieve what you're looking for, utilize swfobject. It's really quite simple to use and has a bunch of options that will be useful when you get more used to using video.
I have had pretty good success using silverlight with the Silverlight 2 Video Player as an example. However, it depends on what your requirements are.
Pros to Silverlight:
Performs Video Streaming very well
Easier to develop/customize if you are a .NET developer
Works on a variety of browser and platforms
Cons to Silverlight:
Does not support every video media type (the example above only plays .WMV files, Silverlight in general supports .WMV and .MP4)
Is not installed on as many client machines (less penetration)
Is not as well known (users may be reluctant to install it compared to Flash)
Is not as popular so there are less solutions/resources out there
Here is another discussion on the topic.
I would go with flash for only one reason: the 99% (or whatever it is today) installed base.
Then go with swfobject or JW FLV Media Player as suggested in the other answers. There is also a jQuery plugin floating around somewhere that helps deal with flash video on a site.