I have a landing page that has a few sections on it. Each section has a button that when clicked, I would like a video to pop-up and play in a modal-type window.
I have a few questions based on all of this so far.
The videos are handed to me in .m4v format, which I'm handling through html5 as:
<video id="delivervideo" width="100%" height="100%" controls>
<source src="#Url.Content("~/Content/videos/DeliverSection.m4v")" type="video/mp4">
Your browser does not support the video tag.
</video>
This is actually embedded in a Bootstrap Modal, and looks quite terrible on any non-PC device (appears on the top of the screen and cut-off).
When I start playing the video, if I skip ahead using the built-in controls, the video simply stops. I am unable to start the video again unless I refresh the page and start the video over.
So my questions are sort of broad here, but they are essentially:
When my graphics team is handing me videos, what format(s) should I request so the video works on iOS, Android, Chrome, and IE? Is there a couple of formats I should support? We have a lot of software to be able to change the format of the videos, just unsure on what formats to use
If I'd like to continue opening the video in a pop-up modal-type window, is there a better solution to this than Bootstrap? Something someone here has experience with that works nicely?
Has anyone else experienced issues with the built-in html5 <video> tag controls, where skipping ahead/rewinding causes play-back issues?
I can share the page to someone through PMs if they are willing to take a look, but really nothing out of the ordinary. Just a simple <video> tag supporting mp4 type, while the video is in .m4v format. It only seems to work on Chrome so far, so not very useful to mobile or tablets.
Note, I am using ASP/MVC and the website is hosted in Microsoft Windows Azure as a Website, not a VM where I have control over IIS.
Related
I have a website with a big video in the background and I used HTML5 video for it. It does all I want on desktops, I can't make it work on tablets though (don't need it on mobiles) - instead of a video I see a black background only.
Code below:
<div id="video-container">
<video autoplay loop class="fillWidth">
<source src="http://link/vid.mp4" type="video/mp4"/>
<source src="http://link/vid.ogv" type="video/ogg"/>
<source src="http://link/vid.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
Is it caused by the autoplay option? If so, is there any workaround?
Thanks,
S.
On most mobile browsers (including tablets - definitely iPad), autoplay will not work. The browser won't download any of the video file, not the first frame or even the metadata, until there's some kind of user interaction event - typically either a click or a touch.
The first thing you can do to alleviate the situation is to set a poster attribute on the video element, which is the URL to a poster image. That image should be visible right away in place of your video. If you want to go the extra mile, you can set a background color on the body so the user will see that while they're waiting for the poster image to load.
Next, you can add a touch or click event listener anywhere you want in the document that starts the video playing as soon as the user interacts with your web page.
I have taken this problem to various forums, and here once (where was it blocked as off-topic). It seems on-topic to me - a specific programming problem, a software algorithm, and a software tool commonly used by programmers.
I have a website of Flash SWF animations with sound. I converted the SWF to HTML5 using Google's swiffy. On desktop PCs, using Chrome, FF and IE, there is sound, but not in Mobile Safari and Android browsers. And not in Chrome on my iPad.
The audio is embedded in the code generated by swiffy, and it looks like it's MP3 encoded in base64 (see "data:audio/mpeg;base64," and "format":"MP3" in the html).
Since there is no developer forum for swiffy, and I get no replies from the feedback form, I looked around to identify what's stopping Mobile Safari, Android browers and iPad Chrome playing the sound. For Safari, I find things like "You cannot preload sound files" but since the sound is embedded in swiffy, there's no sound file to preload. Why no sound in Android and iPad Chrome, both Google products, is also a mystery.
I imagine there's no hack that will solve the problem, if Google hasn't managed to, but insights are appreciated.
I know it's quite late for you but i think some people may also face the same problem and come to this post. So I would like to offer my answer here
As Victor said, you can use getURL to trigger sound outside. But if I use getURL, I would use Web Audio API in the javascript side. Because using Web Audio API, it is possible to play multi tracks simultaneously in mobile. I intergrated library SoundJS to my project.
However, as you have to change every audio frame into a getURL function, it actually costs you quite a lot of time. I found another optional idea that you can just edit the swiffy core once and for all, which use native audio object (but it also mean you can only play one sound at a time in mobile).
originally, swiffy creates native audio object to play base64 encoded sound. Because of the mobile limitation, it's silent if the sound is not triggered by an input event. However it's possible to reuse an active audio object.
First, I have a button to start the animation,which also create an audio object and play it (with a zero length base64 encoded sound);
audio = new Audio("data:audio/mpeg;base64,");
audio.play();
in swiffy core script, search keyword "new Audio", you will see the part that swiffy plays sound. Instead of createing a new audio object, make swiffy use your old audio object
audio.src = a.sound;
audio.play();
After that, without revising, your swf should be able to play sound even in mobile.
However, as it's quite like a hack. It may get some unexpected problem
You can communicate the swiffy flash with the main HTML file so, inside actionscript, you can send a getURL call to javascript where you have a hidden html5 mp3 player, something like:
getURL("Javascript:playSound();");
In HTML, inside the javascript function, something like:
<audio controls>
<source src="test.ogg" type="audio/ogg">
<source src="test.mp3" type="audio/mpeg">
</audio>
I'm still working in this but I hope this help you.
Quite simple, I have a <video> tag as follows:
<video id="video" controls preload>
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.webm" type="video/webm">
<source src="media/video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Fairly standard. However, I'd like the video to open up on mobile devices using the built-in media player, essentially like watching a YouTube video from Safari on an iPhone.
How could I achieve this? The mobile site is built using jQuery Mobile.
Also, I think I read somewhere that removing the type attribute from the <source> tag increases compatibility. Is this true?
Update:
If you are trying to play the video file from an Hybrid android application, then below code should be of use for you. To play HTML5 videos in Android Native player here's a small piece of Java code to use -
Intent intent = new Intent(android.content.Intent.ACTION_VIEW);
Uri data = Uri.parse(“path of the video file”); //Specify the video file path
intent.setDataAndType(data,“video/mp4″);
startActivity(intent);
Now invoke the above Java native code using your JavaScript function passing the video element or path shown above and you should be good with your player.
To answer your second question, i think that removing type attribute doesn't increase the video compatibility in mobile phones as its a mandatory attribute to be set for the native player to know the encoding of the video file.
Video.js is compatible across most browsers but you have to set the viewports etc for mobile browsers.
This tutorial could probably help you out a little more.
You could try using the emerging HTML5 Fullscreen API to do this. It looks supported in iOS5+ and Android 4.0+
Take a look at this tutorial or read the full spec.
And I've not heard of any benefit to removing the type attribute. Taking that out would likely cause problems.
I am trying to design a video website compatible with Android. A good example of what I'm trying to achieve is vimeo.com. They show a thumbnail of a video. When you tap it, the native Android player comes up in full screen:
Currently, I have an anchor to an FLV containing an h.264 encoded video:
click here to watch
When you tap the anchor on Android, it downloads the video rather than plays it. That's not what I want. How do I get it to play full screen in the native player like Vimeo? But unlike Vimeo, I would like the video to expand so that there's not so much black empty space around the actual video.
Ahh I see what you mean, clicking a Vimeo video opens the Android dialog of selecting which app should respond to that request (in my case just the browser (which downloads the file) or video player (which opens and plays it as you wanted)). This is normal Android behavior- if you have not defined which app should respond to a given request, it will ask you to select from among the supporting applications.
Have you even tried embedding a video in the way suggested through the link I gave you? You may find that it will have the exact effect the Vimeo video does. HTML5 <video> element on Android
EDIT: Actually I think your real problem is probably just that the file format you're using (.flv) is not among the core media formats supported by Android. http://developer.android.com/guide/appendix/media-formats.html
if you have the correct codec installed to play the video and doesn't work, check and make sure you have the correct mime types configured and that something in the registry or a file isn't overwriting.
use the old standard of defining mp4 and falling back to flash.
In mobile Safari and Android webkit there are javascript methods and events defined on the Video object that can help with this. There is another StackOverflow question dealing with this topic (for iPad, but I have used this on Android phones as well).
Web App - iPad webkitEnterFullscreen - Programatically going full-screen video
Mobile Safari documentation: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/HTMLVideoElementClassReference/HTMLVideoElement/HTMLVideoElement.html
I'm in the stage of planning a new application for both iOS and Android platforms (tablet and phone), which will heavily feature streaming video playback.
However, the documentation is not entirely clear about capabilities of these platforms when it comes to video playback. So my questions are:
1.) Can Android and iOS playback HTML5 video from a webpage/webview?
2.) Can HTML5 videos be shown as part of a webpage (non-fullscreen) with an overlay?
3.) Can Android and iOS play videos natively in non-fullscreen mode?
4.) Can I do text/graphcs overlay over a played video if it's a part of native app?
The answers on these questions (if possible, with supported OS versions) would be much appreciated, I can't seem to find conclusive resouces as part of the platform documentation.
Ok let me try to answer as clear as possible since I just had experience with apps for streaming in ios and android.
1.) Can Android and iOS playback HTML5 video from a webpage/webview?
Yes The both can with the <Video> tag
2.) Can HTML5 videos be shown as part of a webpage (non-fullscreen) with an overlay?
This depends more on the device than on the OS. iPad can do it without full-screen but iPhone does apply full-screen, Android Tablets Can some Andorid phones Can't.
Specifically on iOS and iPhones the best way to go would be to create a MPMoviePlayerController (not to be confused with MPMoviewPlayerViewController) and you can set the layout in your viewController and restrict the size of the video so you can see the layout. (This allso works of course in iPad so that could be your best approach for both)
3.) Can Android and iOS play videos natively in non-fullscreen mode?
Yes they can, as explained above would be better if instead of using a WebView you use VideoPlayer's in View Controllers
4.) Can I do text/graphcs overlay over a played video if it's a part of native app?
You can using the above approach since your video will be on your viewcontroller where you manage the size and position of the player in your view, when doing it on a webviewthe device automatically loads the player so you are unable to manage it.
You should play safe and go for min OS requirements iOS 4.0 and Android OS 2.1 because of the improvements both versions made on native video playback
I don't think there can be a definitive answer without testing and even then the answers are likely to change (rapidly, I hope). I looked at the reference video here: http://broken-links.com/tests/video/ which is encoded in three different forms, ensuring it can play correctly in Firefox, which supports ogg, Chrome, which supports webm, and whatever supports m4v.
<video id="video" autobuffer height="240" poster="../images/bbb_poster-360x240.jpg" width="360">
<source src="../media/BigBuck.m4v">
<source src="../media/BigBuck.webm" type="video/webm">
<source src="../media/BigBuck.theora.ogv" type="video/ogg">
</video>
I tested this on an iPad 2 with the latest updates, a Samsung Galaxy Tab with Android 3.1, and a Nexus One with Android 2.3 as well as Firefox 5 and Chrome 12 on OS X 10.6.8. Both Firefox and Chrome played perfectly.
Ipad 2: Played correctly in the browser (non-fullscreen). The only anomaly: time was shown as "1' of NaN'"
Android 3.1: Played correctly in the browser (non-fullscreen.)
Android 2.3: Went to full-screen when I pressed "play." After playing, went back to in-browser, but showed time as "1' of 6000'" Also, it hung for a while before playing, perhaps because of the connection speed, but it didn't feel completely stable.
I hope this is helpful.