I am making a kind of a social network. I am now in this part where I allow users to upload their videos and allow others to watch them. I have been researching on the HTML 5 video tag. People say that it would be better to give multiple sources for a video with three different formats namely ogg, mp4 and webm for different browser compability. But the user may upload any kind of video. It may be an avi or an flv or whatever. I am sure that there is a possible work-around. I know that facebook and youtube use flash. But I have exactly no idea on how to get started with flash on HTML. Is there any way around or any guide for flash ? Please Help me out.
I know that facebook and youtube use flash.
They do, but not as a work around for limited browser support for arbitrary uploaded videos.
They transcode the videos (you could do this with ffmpeg) on a server into all the formats that they support.
I'd suggest using an existing Flash video player, such as JWPlayer or FlowPlayer.
Their integration is very easy, as you'll just have to include some JavaScript and CSS files in your HTML page header. Then for every video you want to display you're putting a small HTML snippet at the position where you want to show the player.
This is the default snippet for FlowPlayer:
<div class="flowplayer">
<video>
<source type="video/mp4" src="/path/to/intro.mp4">
</video>
</div>
Related
I need to play MPEG-1 files dynamically from a browser. Uploading them to YouTube or converting the videos is not an option.
How can I do this?
I've seen this, but the answers do not apply to MPEG-1. Is there a way to play mpeg videos in HTML5?
The video tag is not working for the file with Chrome:
<video class="fullscreen" autoplay>
<source src="video/test2.mpeg">
</video>
It just displays a black box and stuttering noise/sound. I can verify that the video is not corrupt because I can play it with VLC. I only need this to work on one specific browser (it does not have to be cross-compatible). Plugins are OK too, as long as I do not have to convert the video. Though I'd rather avoid them.
Some browsers don't support older formats in <video> on purpose, to limit number of crappy, legacy, and potentially insecurely implemented video formats on the web.
The only combination that has a decent chance of working is H.264 (MP4) and WebM (or Ogg Theora), so you must convert the video and for good browser support you will have to generate at least these two formats.
The good news is that modern codecs are much more efficient than MPEG-1, so you'll get much smaller files.
Other options may be:
Give users a direct link to the video so they can download it and play in an external player like VLC.
Embed video using oldschool <object> element, and hope some browsers still have legacy plugins that can play videos (but e.g. Chrome has recently removed support for all plugins except a couple written specifically for Chrome's own API).
Use Emscripten (asm.js) to compile an MPEG-1 decoder to JavaScript and decode the video yourself to <canvas>. JS these days is fast enough to pull that off (although it will quickly drain battery of mobile devices, and a poor video codec combined with an extra download of a JS decoder will be a massive waste of bandwidth).
You can play MPEG-1 videos using JSMPEG: https://jsmpeg.com/
Sample code here: https://github.com/phoboslab/jsmpeg/blob/master/view-stream.html
I have some trouble getting my .mp4-videofiles working. I have edited my .htaccess with the necesserary addTypes, right html5-video-tags ect, but still some of them WON'T show!
I have now tried converting them from .mp4 to .mp4 wich made some of them work live on web.
But heres the real issue that i really can't figure out why it is so:
All my videoes works very well in both MediaPlayer and VLC, BUT, when i lay them on my website, the videoes won't work. I have tried access them via a direct link and the "corrupted" ones won't work while the working ones works.
What it tells me is that i have the wrong MIME-types (No video source found with the supporting MIME-type) - correct translated? ;)
All videos have the same video-html-settings:
<video width="300px" height="168px" preload controls>
<source src="path-to-video/video.mp4" type="video/mp4">
</video>
What is wrong?! :S I'm have no experience at all in videoes and Google comes up with nothing, than i can use some weird looking "ConvertThisToMP4" or "LetMeFixYourMP4"-programs...
Hope you guys will help me or lead me on the right way :)
Sorry for my bad english...
mp4 for web and mp4 for playback in VLC are different things. You'll get different mp4 video support depending on your web browser, though most modern browsers will handle mp4 in some way.
mp4 is a 'container' format, and as such can contain video compressed with many different video and audio codecs. For an mp4 video file to work in a web browser it needs to be encoded with the h264 video codec and AAC audio codec. Some browsers are even more specific and require videos to be encoded with 'baseline' h264 which uses a simple/fast to decompress version of h264 (this is generally for mobile browsers).
You should have a look at your video files using a media inspector to check what the codecs are for the videos. in VLC you can do this from tools->media information then choosing the 'codec' tab.
You can use handbrake ( http://handbrake.fr ) or mpegstreamclip ( http://www.squared5.com ) to recompress the videos to h264/aac/
As an aside, In your HTML you don't need the px values in the width and height tags, inside HTML all size values are assumed to be px, it's only in CSS you need to define the unit.
I am building Self Hosted Video tutorial website.
I want to use HTML5 Player But with just one single Video format (mp4). But problem is that in some browsers like opera MP4 format is not supported.
I know for this i have to add multiple formats in html5 video player but having multiple versions (formats) of the same video will occupy multiple times of space in hosting.
Please give Suggestions.
There is no support for html5 before IE 9.i think you should use Video.Js.The Video.js API allows you to control the video through javascript or trigger event listeners, whether the video is playing through HTML5, flash, or another playback technology.
you can download it from here.
http://www.videojs.com/
read the documentation here.
https://github.com/videojs/video.js/blob/v4.2.2/docs/index.md
I am trying to embed video files (wmv, mpg, avi, mov, etc.) dynamically by creating embed elements in javascript. The problem I am running in to is this has not been very reliable across all browsers and even if it does work, there is no guarantee that the end user has the required plugin to play the video. Ideally, I would convert everything to flv or an HTML5 video format but this is not currently possible due to cpu/disk space restrictions (these are videos uploaded by the end user, not me). I feel like this shouldn't be as difficult as it has presented itself to be - does anyone have any suggestions?
To the day VLC release a browser plug-in, the best way is to convert them to .FLV or .MP4 files server side. And use a free Flash video player for the playback (I mean HTML5 with Flash fallback).
If you do not want to convert those videos, let the end user directly download the files. And deal with the problem of multiple video format himself.
edit:
Or you could move your website out of the HTML browser, and build a desktop software, that can take charge of all those videos format, client side.
edit2:
Use Youtube API or any other already existing video hosting services. Personally I will avoid this solution.
The only way to do it reliably is with flash. Use ffmpeg to convert incoming videos to .FLV and use a flash player.
I want to embed videos from different video sites like YouTube, Vimeo and so on...
But I have a problem:
The Skins of the players are all different
and I want a consistent video skin.
Is there any possiblity to get this work?
I can't host the videos on my server because I have to pay for the traffic
and that would make me poor =(
I know that Youtube at least has a chromeless player, you can check out the API here: http://code.google.com/apis/youtube/js_api_reference.html#GettingStarted
I don't know about any of the other sites, though. I'd try Googling the name of the site and "chromeless" or "api" to see what comes up.
Simply put, no. The video site content has to include the skin for each site, unless you rip the video out and self-host it.
There's a reason for this, and I doubt you'd want to see the sites all fold/go paid because of people hijacking content without attribution.
Try Media Element JS
It wraps your youtube and vimeo video to a HTML5 video, no need to host the video on your website. The script from the website can take youtube and vimeo videos and make convert them into HTML5 video.
One side effect of this script is that since it can convert both Youtube and vimeo videos to HTML5 then the players will be the exact same for both of them.
Hope that helps,
regards