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.
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
Just trying to work out what the standard aim is for html5 video in sizes, currently I have my videos around this size:
WebM - 4.1Mb
MP4 - 4.9Mb
Ogg - 8.1Mb
Is this acceptable and would this be affecting the speed of my video as at the moment it seems to be freezing.
Thanks
I suspect that your carousel is trying to play the videos before they've loaded enough data (so you're seeing stuttering and freezes).
You'll probably need to look into the javascript HTMLMediaElement API, making sure you don't start automatic playback before the readyState reaches HAVE_ENOUGH_DATA.
(By the way, if you need compatibility with older browsers too, have a look at MediaElement.js, which gives you the same API, but with a Flash/Silverlight fallback too.)
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 trying to make a site available offline in a web browser (specifically: Mobile Safari and/or Google Chrome), using a manifest file to load the offline content into the application cache.
This works just fine for images, html content and even font files. But not so for the videos I am trying to store. Mobile Safari is asking to increase storage to 50MB (just as it should) to accomodate the videos, but when going offline the videos are not displayed. All in all the cached content amounts to 37MB.
I am using JWPlayer to show the videos (setting the HTML5 player version as the preferred player), but I have also tried the HTML5 video tag on its own to no avail. The JWPlayer is returning the "Could not load video file" message, just as if the URL was invalid, when going offline (but they work fine online). The videos are H264 encoded in MP4 containers.
Is Mobile Safari on iPad at all capable of storing and retrieving MP4 (or other video) files? Is there any special trick that needs to be employed?
The problem is that Safari itself doesn't play the videos. They're played by the QuickTime plugin, which ignores the browser's caches. See this article.
I don't know of any workaround (other than PhoneGap etc.), but I would certainly love to have one!
You could not use the JWplayer in offline (at least with your current version). In their script (swf), it is fetching some external script from their server (include their logo) such as
http://p.jwpcdn.com/ ... /jwpsrv_frq.js
http://p.jwpcdn.com/...../jwpsrv.js
http://p.jwpcdn.com/...../logo.png (JwPlayer text)
I think it's all about their authorization and license checking. It would take you an amount to get away that logo for the paid version, they may ask your domain and they will add it into their list of the customer's valid website domain, and they also give you a script in the static link and you can add it into your cache file.
I want so serve some videos on my site. They are available as .MP4 files gotten from a FlipShare camera.
Now I tried converting them to WMV (which succeeded, but when embedded in html in a <object id='mediaPlayer' width='320' height='285' classid='CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95' etc' tag, users have to install an addon and the user experience of 10 Windows Media Players on the site isn't just so good.)
So then I looked at youtube and wondered how they do it, but I can't figure out what format they convert the video to.
So my question is: What format do I have to convert my video to, to show it in a player which does not need to be installed in the users browser. What tool do i need and what is the html code to embed such a video?
As you can see: starting from scratch.
PS: I often hear: This or that file extension is just a container, there can be anything inside. If you're using this in your answer, can you explain this to me, because I never understood this. For me a .cs is a c# file and a .doc a Word file, and not 'a container'.
This isn't an easy question. The basic answer is that you need to use a format that the user's computer already supports. There is no one answer to this question. YouTube encodes videos as MP4 and embeds them in the page with a Flash-based movie player, and Flash is pretty widely supported, but you'll notice that Flash isn't available on a lot of mobile platforms — so anybody using an iPhone is shut out if you go the Flash route.
HTML5 introduces the video tag, which is meant to solve this problem once and for all, but there's still a hiccup even there — most HTML5-enabled browsers support h.264-encoded video, but Mozilla supports Ogg Theora instead. YouTube is currently experimenting with a <video>-based player, so this does seem like the future.
I believe the current best practice to support the most people possible is to encode as h.264, try to serve as a <video> element, and have a Flash-based player as a fallback if that doesn't work (which can play the same h.264 file).
I'd say the most popular solution at the moment - utilized by YouTube and other major video portals - is H.264 encoded Flash-based Video. Flash can play Video since... I think Version 8 or 9, and has since gained significant market share.
My personal favourite Flash player is LongTail Player, but it isn't free for commercial use.
Here's a SO question with a list of Flash based players including open source ones.
Flash won't play on iPhone and iPad, though.
If you want to support computers with Flash Player 9 (I've seen some around, but I don't have any hard numbers) you will need to encode FLV files (which use a codec named Sorenson I think).
The upcoming alternative is HTML 5 Video but suport for that in browsers is nowhere near a major market share.
This question requires a re-answer now that it's no longer 2010 and HTML5 videos (as utilized by most video hosting sites) and chunk-based videos (sent as responses to periodic XHR requests - as utilized by Youtube) are the norm. While there is no best way to add video to your site, Flash is definitely nowhere close to even being good as of the time of writing of this answer.
The simple un-researched answer is: Just use a video tag and it'll work out!
This is simple and intuitive, and should work fine in many of your use-cases.
The researched answer is: Unfortunately, upload the video on Youtube and embed it on your site.
The pros and cons of embedding on Youtube over just having a video tag:
The pros:
Allows you to offer your video in a multitude of qualities.
Very bandwidth efficient. Youtube is bandwidth efficient for your users since it reencodes videos, and is also bandwidth efficient for you since you'll no longer be serving your videos off your own hosting.
Offers features like closed captions, automatic subs, playing at multiple speeds, full screen player, etc.
The cons:
It's a very heavily monetized service, chances are they'll want to put ads on your video if any of its content isn't 100% originally yours.
It has very strict laws/terms and conditions that you need to adhere to, at least in my opinion.
It tracks your users. If your application requires privacy and you can't rely on your users to protect themselves, then Youtube isn't ideal.
Other alternatives that mix the pros and cons of those two options are:
Using a Javascript video library to get HTML5 video along with some of the pros of using youtube, but none of its cons.
Using FFMPEG on the server side, for bandwidth issues.
Using some CDN that supports video to deliver the video, for reliability and bandwidth issues. My current favorites are ones that rely on service workers and the bittorent protocol, to stream from users to each other, but whether that suits you or not depends on your application.
Using AWS storage services to store the video, and AWS gateway/CDN services to serve it, which might be a great solution cost-wise and efficiency-wise if you don't want youtube but don't want to store videos on whatever infrastructure is serving your website.
Sources of this answer: Personal experience. As much as I didn't want to answer from experience, this question really needed a new answer! Feel free to edit it with something more concrete.
Converting your video MPEG-4 with H.264 will get you 97% coverage on current browsers across desktop and mobile, although some Android devices don't support hardware acceleration for this format. To address that you could also serve WebM with VP9 codec.
I wrote up a summary of browser support that might be useful: https://stuartk.com/posts/whats-the-best-html-video-format-to-serve/