I'm creating a site that streams video's and I want to allow the user to upload video's themselves. AVI or MP4. I've done some research about it. If I would want to make it cross browser compatible I would have to use all three of these formats:
.mp4, .ogv, and .web
Luckily I only need to get this to work in chrome. However, it turns out chrome doesnt support .mp4 well. I suppose the best option is to convert them, but I'm not sure. What would be a good solution for this?
This is what I use to play videos on a site I did.:
Cross Browser Player
I built all of the uplaod ability with php and use this player to allow user to play the videos.
Related
I am trying to upload an MP4 file. But with this specefic file only the sound content is displayed.
With all my other videos there is no problem only with this specefic one.
i found the following SO question:
HTML5 video of type video/mp4 playing audio only
Where he suggest to find a converter.
Does anyone know if this could be the problem and how do i secure that regardless of what video my user uploads that it will always be able to play?
Yes, this can be a problem.
You have not written about your server limitations, so if you have the possibility to execute converters (like ffmpeg) then this is the best solution. This way you can also guarantee fixed resolution, framerate and various other properties, and your server won't eat up all the space if someone uploads a 2GB video... (Users can be dumb sometimes.)
If you cannot run ffmpeg on the server then try reading some about how can you detect codecs on your server, in the language you use, etc. Then, if you still want to, post a specific question.
Also try opening your videoplayer page with different browsers (Chrome, FF, IE at least). They might not support the codecs the same way.
I assume that this is possible, here is question, also on stackoverflow, that confirms it.
However I have failed while trying to make it work, so I'm asking for your help.
How can I do this?
WebM uses a variant of the Matroska container so it's not too surprising that some browsers are able to play some .mkv files. It's likely that you'd need to set the content type header to something that the browser recognises (eg. video/webm) if it was going to work at all.
However, that's only part of the story. The Matroska container is just that, a container. Inside the container are video and audio objects which have been encoded with particular codecs, if the browser you're attempting to play the file with doesn't support those codecs then they won't be able to play the file even if they can parse the container format. If you want wide compatibility then your best option is to transcode to one of the more common container/codec combinations such as MP4/h264 or WebM/VP8.
You wanna take a look at DivX player
Cut & paste
As of version 2.1, the DivX Plus Web Player supports the HTML5 API, so
it can be embedded and controlled using the tag and open web
standards such as JavaScript. It takes full advantage of the
tag’s attributes by allowing publishers to create seamless playback
experiences and custom controls for DivX, AVI, MKV, MP4 and MOV videos
across multiple browsers: Firefox and Chrome (Internet Explorer &
Safari Coming in full release version).
I am planning on video upload capability on a public website.
I am not going with Flash instead going with HTML5 using MediaElement.js
My goal is to make sure that processed videos play on browser and all smart devices
I used to convert uploaded videos to flv file to play using flash.
I will use FFMPEG to convert uploaded videos to the target format.
My question is how many different format do I need to process\convert the uploaded files?
You will need at least 2 for the HTML5 video element. You need to supply a H264 and either Ogg or WebM. See Wikipedia for the supported codexs.
I have never used MediaElement.js but it look like they can work with either of the two formats in browsers that don't support the element.
if you want to play everything via HTML5 then YES, you do need 2 video-files for each video, as explained by Maurice.
BUT: You could use the Flash-fallback and only use mp4 videos (MEJS will take care of Flash). That way it plays on iOS, many Android devices and chrome, safari and IE9 via HTML5 - Firefox and Opera users will see the Flash-player.
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.
Our company is making a mobile version of our website. We have several product videos we want to show on the mobile version.
When I try to use
video
I get sound playing but a black screen on my htc incredible android os phone.
I'm thinking that the video is playing but in a different browser window. I need it to display all in one window without having to switch to a different window.
I tried the html embed tags and get no video or sound at all, from what I've read these tags are not very realiable cross browser.
I also just tried the html5 video tags below. I get an icon identifying that it's a video file but it doesn't play.
<video src="video.wmv" controls="controls">
your browser does not support the video tag
</video>
Is there a special format the video file needs to be in? Should I be using the href or embed tags, what other options do I have?
If it helps to know, I'm using the mobile doctype on my webpages.
Thanks
The video format you need to send to the browser varies by browser. Firefox supports Ogg Theora, everybody else seems to support H.264 in an MPEG-4 container (MP4 file.)
See here for an example: http://html5demos.com/two-videos
In any case, WMV won't work.
Android doesn't support the WMV format normally. Here is a list of the supported formats:
http://developer.android.com/guide/appendix/media-formats.html
If iPhone/blackberry/etc don't have a format in common, you may need some javascript magic based on the user-agent to choose which file to embed.
I've found a simple solution to my problem. YouTube. Upload videos on youtube that need to play on your mobile web site and they work. PERIOD.
No fuss! Just copy the embedded URL from the YouTube video page to your mobile page and your all set to go.
I'm not exactly sure how YouTube makes the videos compatible.I'm guessing when uploading the video it's automatically converted into several formats so that the right codec / container is played based on what smart phone is accessing the page.
This list is not extensive and I'll probably think of more later, but comment if you can think of any more advantages or disadvantages of using YouTube for mobile videos.
Advantages:
++ YouTube is universally accepted amongst most major smart phones (therefore your video should play!).
+ If you have limited bandwidth you don't need to worry about wasting any bandwidth of your own.
++ Easy to setup, little to no configuration (setting video resolution). It just works! (encapsulation...)
Disadvantages:
- YouTube symbol during video play back
- It's not hosted on your hosting service. May not be tracked by some analytic services. (requires custom tracking? onclick java-script event?)
- YouTube bandwidth may not be acceptable for smooth replay? (although from initial video viewing bandwidth seems acceptable (minimal buffering...), but not confirmed...). Probably mostly dependent on the cell phone 3g / 4g connection quality.
- limited video file size / resolutions? shouldn't be a problem because you'll want a lower quality video for smart phones.
I would like to know exactly how YouTube make it's videos compatible with smart phones so if necessary I could host the videos myself, but for now this seems to be the best choice.