I have several MP4 videos I want to play over my website, playing using CloudFront and the files are in S3. However, the files are LARGE! We're talking 35G in size. Naturally this will not work wrt standard playing.
I'm using something like this:
<video id="my_video" width="700" height="550" poster="images/bunny.jpg" loop>
<source id="src_mp4" src="largefile.mp4" type="video/mp4" />
</video>
What options do I have available to make this work so it looks like it's streaming? I have the files as MP4 and AVI.
I don't think that there's any way to make it "look" like it's streaming, nor do I think there is there anything to actually achieve streaming of media files through HTML5.
A few things you could do:
Reduce the picture/audio quality of the videos
Convert the videos to the Webm format and serve them if the browser can play them (codec detection might be buggy so you may not want to do this)
Make the user wait a certain amount of time (maybe 30 seconds) and pray that the video can play until the end without having to buffer.
If you don't want to do any of the above, this question may help.
You can provide HTTP adaptive bitrate streaming with DASH in HTML5. Have a look at dash.js and the player example which works great but browser support is still limited.
You can provide 35 GB mp4 URLs to an HTML5 video tag providing your web server hosting the mp4 files is properly configured but generally you will be advised to consider streaming rather than progressive download for large files. There are streaming servers out there (Wowza, Red5, IIS ...) that would do that but this could represent a cost and some commitments on your side as you will need to maintain a streaming server and a player (most likely a hybrid player Flash + HTML5 to get good browser coverage).
Also platforms like Vimeo or Youtube (or other online video platforms) may fit your requirements in some cases.
Related
I've doing Javascript programming for some time but it's always been related to data updating, saving, manipulating, etc.
I have no idea how something like an in-browser audio player gets audio (especially live, streaming audio) from the internet and plays it out of my computer speakers.
How does this happen in Javascript?
For example, how does a website deliver live audio to my speakers using Javascript? http://player.streamtheworld.com/liveplayer.php?callsign=WVIEAM
The live audio is not much different from pre-recorded audio... it's just played back as it's received, and when live it's encoded as it's recorded.
In browsers these days, the most basic form of streaming audio is a simple <audio> tag. By changing the src attribute from a file to a stream, you're up and running:
<audio src="http://cdn.audiopump.co/waug/main_mp3_256k" />
The browser doesn't know or care in this case that the audio is a live stream. All it knows is that there's some media data that it's fetching via HTTP, and playing back while it comes in.
If your browser compatibility is good, it would be preferable to use the MediaSource API, giving you more control (such as switching to a different quality stream mid-stream, like in HLS) and ensuring that the browser doesn't try to cache what is effectively an inifinitely sized file.
For example, how does a website deliver live audio to my speakers using Javascript? http://player.streamtheworld.com/liveplayer.php?callsign=WVIEAM
This particular site is ran by Triton Digital, and they still use Flash. Many sites still do this as a holdover from a time when HTML5 audio was not widely supported. There is little reason to do this today.
Other reasons to use Flash include incompatible server protocols. If your streaming server is using RTMP, you're stuck with Flash as browsers don't speak RTMP.
There used to be an issue with streaming AAC in-browser due to browsers not properly handling AAC wrapped in ADTS. (This encapsulation is required for streaming AAC in most situations.) Most browsers have resolved this, but I suspect that this is the reason Triton Digital is still using their Flash solution. By using Flash, they can play AAC/ADTS streams.
I am currently trying to embed the m4v videos in my html webpage.
using the following code
<video controls="" height="360" width="480">
<source src="path/to/my/m4v/video" type="video/mp4">
<source src="path/to/my/m4v/video" type="video/ogg">
</source></source></video>
its working perfectly in google chrome.and it demands for an ogv video for mozilla browser.as we cant get an ogv video from our client.Also I am using it in hero framework.
I also tried to use the iframe tag used by youtube embed code.that works with webkit browser(google chrome).
but not able to play in mozilla firefox browser.I need to play m4v video in cross browsers.Is there any way or any html tag I am missing here?I explored alot but couldn't find an efficient solution.
m4v format files are not supporting by browsers, these format need player support. these files directly cannot run in browser.
like chrome, firefox, ie...etc.
Because these file format belongs to iOS operating system, developed by apple.
Read the instructions given by below link Wikipedia.
http://en.wikipedia.org/wiki/M4V
M4V - Video Supporting Features
these are the possibilities to
upload m4v files in the you tube that link we can use.
need to convert in to mp4 format all files and use in server.
need to write any script that converts the m4v files to mp4 fomat from server side.
need any builder that directly converts that m4v to mp4 formats files but it may be payable it.
You will probably need some external plugin or servcice support for your codec (m4v) since is not supported by all the browsers out there.
For a list of supported cross-browser video and audio formats I suggest you to check this documentation by MDN
Media formats supported by the HTML audio and video elements
In just a few Words, the formats you need to be 99% bross-browser are:
H.264 and AAC in MP4
Theora and Vorbis in Ogg
VP8 and Vorbis in WebM
HTML5 Video is just a convention to play a certain video formats with a new element for which browsers will implement an own player. HTML5 won’t provide players or something like that.
You have to look for the codecs and contained supported by most browsers, which, if I remember well, are mostly Theora for Video and Vorbis for audio, in an OGG container.
Then I remember that Webkit browsers will support Matroska (MKV) containers using V8 as video codec and Vorbis for audio.
My recommendation: provide an OGG file with Theora and Vorbis as video and audio codecs respectively. Inside provide a fallback using an MKV file with V8 and Vorbis and then, if you can, inside an MPG video file using Mpeg2 and MP2 (couldn’t think on something better) as video and audio codecs, fallback. Then as the last fallback, a Flash player playing a FLV video file.
<video src="thevideo.ogg">
<video src="firstFallback.mkv">
<object type="video/mpeg" src="secondFallback.mpeg">
<object
type="application/x-shockwave-flash"
src="player.swf?etc...">
<p>Download the video etc...<br />
or use a more modern browser to watch online, etc...</p>
</object>
</object>
</video>
</video>
Etc... ;-)
With this configuration, most (if not all) browsers should be able to play your video, preferring the most supported (and most modern) format. “Fallbacking” until they find a Flash Player.
For hints on what formats to support: take a look at the HTML5 Video part in Wikipedia.
Important: In your code you are refering to an absolute filesystem path, which is totally not-accesible for a web visitor. Maybe in the src you meant /video/file2.m4v.
You can use HTML5 video tag.
or
jplayer.org
or https://github.com/html5-ninja/Bootstrap-video-player-jQuery-plugin/blob/master/index.html
view about url you got complete reference .
If you're not forced to use Quicktime, the Flash based JW Player NOT free
can do Quicktime encoded MV4 if the client has Flash 10 installed.
Hence tried using the JWPlayer from the official site of jwplayer.
Will have to purchase it to get a licence key.
Enables to play .m4v video on cross browsers.
Works perfectly.
I'am looking for some javascript player that could play hds or rtmp stream. Can't find it still.
We have a wowza, that is sending to end users a video stream in rtmp, and it is being played with Flowplayer. Now people want to watch this stream on iPad/Android devices. We have succesfully played it on Android 4.0 tablet because I've installed a flash player there. It plays right in the browser. But I cannot find similiar player for iPad. I heared that it does not exist. So the best solution would be some kind of JavaScript player.
You won't be able to play an RTMP stream on a plain webpage in iOS. HDS appears to be closely tied to Flash Player, so you might not be able to use it either, but given that it has HTTP in its name, it might be usable.
If you have some video that you stream the normal way, just use the video tag:
<video width="800" height="600" src="some-video.mp4">
Your browser does not support HTML5 video. Sorry.
</video>
If your video is available in multiple formats, you can drop the src attribute on the video element and instead have multiple source elements with src and type attributes.
If your web server is configured correctly, video can be streamed this way.
I have video which is delivered over HLS. Now I'd like to test in JavaScript if the device actually can play HLS video in HTML5.
Usually in Javascript I did something like
document.createElement('video').canPlayType('video/mp4')
However I can't figure out which 'type' is the right one for HLS.
Apple's Safari HTML5 Audio and Video Guide seems to suggest "vnd.apple.mpegURL" ("Listing 1-7 Falling back to a plug-in for IE")
<video controls>
<source src="HttpLiveStream.m3u8" type="vnd.apple.mpegURL">
<source src="ProgressiveDowload.mp4" type="video/mp4">
....
but canPlayType("vnd.apple.mpegURL") return an empty string even on iOS devices which can play actual HLS streams perfectly fine.
Is there any way to check for playback capabilities without 'external knowledge' (e.g. "check for iOS user agent and assume it can play hls")?
I know I can specify multiple sources in a element and the browser will use the first playable source. However in my case I need feed a single URL to JW Player which I can't modify. So somehow I need to find the "best playable URL" from a set of video encodings. (An open source JS library which handles source selection would be a nice workaround though.)
I haven't tested this across the board, but it looks like you should be testing for the full HLS mimetype application/vnd.apple.mpegURL instead of just just vnd.apple.mpegURL.
application/x-mpegURL and audio/mpegurl are also suitable mimetypes for the HLS m3u8 file. audio/x-mpegurl is also listed as an acceptable mimetype according to Apple, but it doesn't appear to be mentioned in the actual HLS draft spec.
In Safari on iOS and OS X,
document.createElement('video').canPlayType('application/vnd.apple.mpegURL')
returns maybe. I'm not sure if there are any other browsers that support HLS -- Android doesn't seem to like this syntax (despite some assertions I've seen to the contrary), and I believe that it may be due to the fact that the actual video playback is delegated to an external application, rather than the browser itself.
References:
http://developer.apple.com/library/ios/#technotes/tn2235/_index.html
http://www.longtailvideo.com/html5/hls
https://datatracker.ietf.org/doc/html/draft-pantos-http-live-streaming-03
http://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Using_HTML5_Audio_Video.pdf
I'm looking for a web video player with which I can keep the full compatibility with iOS devices: iPad, iPhone, etc (so I would exclude all Flash video players).
Until now I've used Flowplayer but I have some problems:
the main problem is that using flv files I can start very fastly to play the video but I don't have any compatibility with iOS devices. Instead, using mp4 files, I have the full compatibility with iOS devices but before playing the video I have to wait that all content of the file has been loaded (few minutes).
So my question is: does it exist a video format that allows me to play videos very fastly and also compatible also with iOS devices?
Not talking about HTML5 just yet, lets assume you are first interested in supporting most users and legacy devices. Unless you are using an embedded player, (such as Flash), there is nothing inherent in all browsers and/or JavaScript to allow you to play a video that is standardized across these devices. If you simply reference a link to the video file, you are asking the device to natively download and decode the video file. This is why it does not typically begin playing until the entire file is downloaded. This is dependent on each device having a compatible MIME encoding configured for the file type which points to a player that the browser can invoke to handle the file. When you use something like Flowplayer, usually these Flash applications can begin playing video before it is fully downloaded because it knows how to download the video from your server over HTTP and once it has received enough of the video stream (buffered the video), it can begin playing it. Currently your best option is to use something like you have been using for most devices, and have a separate link to the mp4 for iOS devices. If you just re-encode any videos you already have in FLV or whatever older formats you have been using to mp4, you should be able to play that in a current version of any Flash based player, as Flash will work with those files as well as it's legacy formats.
I've found this resource and it seems to be very good: http://code.google.com/p/php-mobile-detect/