I have an .mov file that is too long to upload to YouTube. I want to put it up in essentially a YouTube player but have the video be self-hosted. Can anyone recommend an easy way to do this and make it cross-browser compatible?
Sublime Video is going to be an awesome HTML5 player someday!
A flash player is okay, flowplayer and jwplayer are usable.
Vimeo also hosts videos!
.mov just isn't that friendly for the web.
YouTube already has a HTML5 mode (which you have to opt into though) which I assume means they convert the videos themselves. It's worth checking out, but as I mentioned, each user has to opt into using the HTML5 mode so it's probably not worth it.
If you're going to host it yourself, I'd suggest converting it to OGG and MP4 (and possibly WEBM) and playing it through the MediaElementJS player.
Related
I want to be able to play videos in my website. From what I understand there are only like 4 formats supported in HTML5 amongst the browsers. I can't seem to find any straightforward tutorial on how to play a wider array of formats. How can I play, let's say an mkv file?
I believe from what I've read so far, there's a way to setup vlc or ffmpeg to serve and simultaneously convert the file to a usable format. Is this right? How can this be done?
My current solution is to run a node http-server in the video directory and play it via:
<video autoplay controls class="player">
<source src="http://127.0.0.1:8080/movie.mkv" type="video/webm" />
</video>
This gets me picture but no sound. Volume control is disabled.
html5 has a <video> tag and you are using it correctly. This tag, and its attributes, is standardized so every browser should follow this spec, in theory.
In practice not every browser follows the spec and supports every aspect of html5 video capability. Think of other OSes, or handeld devices that must be capable of stream a video too.
Here you can find a compatibilty table and you can explore wich file types are supported by each browser:
http://caniuse.com/#search=video
As I see, mkv is not included in this spec so the browsers that can play this video are already doing something that is not required by the spec.
Last but not least, I would not suggest you to use plugins because they're not cross-OS compatible, nor cross-browser (including mobile) compatible.
I'm working on a fairly simple mobile App, geared more towards people who may have trouble with technology. As such, it needs to be as easy to use as possible and I need to be able to play HTML5 audio/video files on start. The problem, as many of you may know, is that mobile devices tend to turn off Autoplay of video content for bandwidth purposes. I'm told there are ways around it using some mild scripting, but all the resources I've found seem to either be outdated, or unsuited to my needs. The development tool I'm using allows me to plug in HTML5 code, but I need to be able to plug in a video that will run without user input. It should also be noted that these video's must be hosted online somewhere (ie, It cant have the video load from inside the app).
Any Help you could give me on this issue would be greatly appreciated.
You didn't specify OS or device or browser. It's been a long time and you probably don't care anymore but if anyone else comes past this, my answer.
Try placing "playsinline" inside the video tag.
Eg. <video playsinline> </video>
I can confirm this works in iOS 10.
simply put, I've been working at this problem and I can't seem to find a solution that works. I have been trying to locate a way to play live video from our Wowza server's MPEG dash streams with no luck. We're trying to stick to html5 's video tag since flash player doesn't work for our ARM based systems.
anyone have any clue on sources so I can actually get the foot in the door with this one? Feel like I've been charging at a brick wall all week.
As Szatmary already mentioned MPEG-DASH using only the HTML video tag and feeding the .mpd to it won't work in web-browsers. However, you do not have to implement a player on your own, as there are solutions available which also support live scenarios, like dash.js or bitdash. For a playout with dash.js, MSE support in browsers is mandatory, whereas bitdash uses also a Flash fallback. Both are working on Chrome on Android and can handle live streams.
the video tag will not work with DASH. Your browser needs to support Media Source Extensions (Many newer browsers do). Then each DASH segment needs to be downloaded and passed into MSE. DASH.js can do that for you. iOS does not support MSE. Nor does most android devices. for iOS you must use HLS in the <video> tag.
I am a little new to embedding videos on a website. What is the best way to go about it? I just started reading up on it.
I read that I should use HTML5 and the browser's native player. -- Does anyone know of a javascript library that will use the browser's player and detect if the browser is not using HTML5 to downgrade to a flash player?
As far as encoding what is the best approach? I am planning on writing a little console app to use FFMPEG to convert the videos. But what encoding should I use? I heard H.264 is promising? But
This is what you're looking for: http://videojs.com/
Encoding wise, I think H.264 and WebM is a wise choice. That way you'll satisfy all modern browsers and mobile devices (incl. iOS and Android), and only fall back to Flash for older, pre-HTML5 browsers (and FF 3.6, which only supports Theora.)
The DIY approach would be to use the Video For Everybody embed code. That will lead with HTML5 video and fallback to flash.
Then for video encoding, you can use FFmpeg like you said.
To make your life easier, you should check out VideoJS for your HTML5 video player. It handles a lot of cross browser issues and some extra features that browsers don't support yet.
For video encoding, if you're planning to use FFmpeg specifically for automating encoding, you should check out Zencoder's video encoding API. It could save you some set up time and compatibility issues.
For codecs, #1 priority should be h.264, specifically using the baseline profile so it will work on smartphones. After that, ogg and webm are both good choices. WebM is higher quality for file size, but Ogg can be viewed by way more users because older version of Firefox support it. And just to note, if you only do h.264, the Video For Everybody code won't fallback to Flash in Firefox and Opera (that don't support h.264) so you'll need to use a player like VideoJS.
Use Handbrake for video encoding, especially for HTML 5 support.
HTML 5 is an awesome way of embedding video, however it hasn't been standardized yet. You definitely want to use it if you're supporting iOS devices, as they of course don't support Flash which is the most mainstream way of embedding video.
HTML5 is pretty awesome because this is how simple it is:
<video src="video.m4v" />
Here is a fantastic link you will find useful:
http://www.robwalshonline.com/posts/tutorial-serving-html5-video-cross-browser-including-ipad/
I read that I should use HTML5 and the
browser's native player
Which idiot told you that? Given that you will loose out on a significant portion of the client population you either run a monoculture of HTML 5 browsers, of whoever said that should be serving burgers at McDonalds, not give advice to people. HTML 5 and the integrated player are nice, but not there yet for the general public. In a couple of years, yes. Now - if I hire a web company for putting videos on a website and they do that, they get sued for gross neglect and incompetence.
Today, playback is mostly flash - that has a high penetration. A flash video player is also what sites like youtube currently use. If you go for less (penetration), Silverlight is very good and has the complete backend infrastructure.
I heard H.264 is promising?
So what? FIRST you need to fix the playback side, then you use whatever format is most efficient given your playback decision.
Is there a way to play video on a webpage with javascript without Flash Player ?
HTML5 will support video playback via the <video/> element. See here for more details, and here for implementation details.
You can always embed Windows Media, Real Player or QuickTime directly into your page. There's also Silverlight, if you're simply looking to avoid Flash. If you don't care how it looks, you can build a low quality player in Java. On some browsers, there's the HTML 5 video tag, but there's no real standardization on CODEC just yet.
There's always the poor man's alternative of just loading a bajillion individual frames as .gif/jpg/png and having javascript display them in sequence. It would be absolutely horrible for bandwidth and memory usage, and of course no audio, but it would (somewhat) simulate video being played.
Of course, on Windows platforms, you could use ActiveX and/or embed media player and play avi/wmv files as well, without ever touching flash.