How to embed an m4v video file to my html webpage? - javascript

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.

Related

Playing Large MP4s on Webpage

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.

only sound with .mp4 files in firefox

I'm using the mediaelementjs gem implementing the 2.13.1 version.
Everything works fine in Chrome and Safari. However Firefox will only play the sound when trying to read a .MP4 file.
http://mediaelementjs.com/media/echo-hereweare.mp4 when using this one, the video and
sound play well (however the fullscreen button doesn't work)
http://video-js.zencoder.com/oceans-clip.mp4 but when using this one, only the sound play
and the video won't show up.
My code is very simple:
$(element).html(
'<video src="http://video-js.zencoder.com/oceans-clip.mp4" '+
'width="320" '+
'height="240"'+
'</video>'
);
$('video,audio').mediaelementplayer(/* Options */);
Is this a bug from mediaelementjs or am I missing something ?
Firefox does not support the H.264 codec (usually used in .mp4) natively, it relies on your OS decoders to play it (this currently only works on Windows, and only on Windows 7 or 8). If your OS has no decoders installed it won't play the video at all.
Chrome, IE and Safari include their own H.264 decoders. Firefox doesn't because the H.264 codec isn't royalty-free so Mozilla would have to pay to include a H.264 decoder in Firefox. Furthermore it is against the foundation's open-source philosophy to include a very patented and very non-free (as in freedom) codec in its free and open source browser.
A solution is to provide a flash-based alternative as a fall-back. Another solution is to provide the file in two formats, e.g. H.264 and WebM which covers all large current browsers.

javascript html5 stream player

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.

Flowplayer HTML5 Video Not Found

I have flowplayer running on a page in a slight variation of the playlist demo on their site, and for the most part it seems okay.
However, when I pause the video and switch to another video in the playlist on Chrome, once in a while, it will say HTML5 video not found (it will list the current video, not the one selected).
This will proceed to break the player and the page, forcing a refresh. The message also seems to show up on page refresh sometimes, but that doesn't matter much since it will be reloaded.
I am not sure what is wrong, but I have two theories.
1) MP4 file not streamable
-possible but unlikely considering I can jump around the video easily
2) Timeout from S3
-maybe, but I don't see any errors.
Has anyone seen this/know how to debug it?
The first thing to do would be to test this in another browser. If it works ok then it will be a video compatibility issue with the browser.
Mozilla has a very good article on Media formats supported. In it it states:
The MP4 container format with the H.264 video codec and either the AAC audio codec or the MP3 audio codec is natively supported by Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. Firefox will soon support the format, but only when a third-party decoder is available.
For the best cross browser support you really need two video formats MP4 and WebM

HTML5 video: How to test for HLS playing capability? (video.canPlayType)

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

Categories