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.
Related
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.
I am trying to play my webm video on my android.
my code is:
<video width="290" height="517" autoplay loop>
<source src="/assets/videos/livematch.mp4" type="video/mp4;">
<source src="/assets/videos/livematch.webm" type="video/webm;">
</video>
I tried without semicolons as well ...type="video/mp4"...
When I open the page the placeholder of the video is black.
When I am trying to download the clip (press and hold on it) it actually saves the mp4.
How should i write the code so it will automatically recognise the device?
Hey I would try to remove the type attribute like showed in the first link I provided. Otherwise you can try to manually call video.play() like showed in the second link.
Playing HTML5 Videos in Browser -- What Works for Most Android Devices?
HTML5 <video> element on Android
First, I've looked at this question, but it's a few years old and support for these things might have changed.
I'm developing an HTML5 app for Android using an IDE (HTML5 Builder) that allows to export the HTML5 app to an Android APK. I'm doing that and everything works fine except the video and audio files.
In that app I have one video in mp4 format, and a few audios in mp3 format. When I run that app as a web-app in the internet browser of a desktop and in an Android device the video and the audios work perfectly. However, when I export that app as an APK and install it in an Android device, everything works fine (navigation, css, images, etc) except the video and the audios.
Is it a problem of the format? I've been doing some research and it seems that mp4 and mp3 should be accepted... Besides, I've followed this method to encode the video as explained in this article (which is the same method explained in the question I mention above) but still the video doesn't work.
Any help with this would be appreciated!
First I will state that with me I've experienced a hit or miss with mobile devices. Some mobile devices will work fine with my code other times they wont work at all when using audio or video. I know the following works with iPhone, and supports my primary android device but not all android devices.
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogv" type="video/ogg">
<source src="movie.webm" type="video/webm">
</video>
I recomend making the same video files for all 3 formats, this way if a device doesn't support one format but supports another you'll be in luck. The same is for audio but you use the audio tags.
I would recomend installing the following Android Apps on your device to see if your device supports all of the HTML5 features. https://play.google.com/store/apps/details?id=com.mds.phonegapapijqm and https://play.google.com/store/apps/details?id=com.phonegap.phonegapdeveloper
I know you said you weren't using phonegap but still those apps are very handy for testing HTML apps for android in general.
I'm Making a Mobile website using jquery mobile and I'm only considering iPad, iPhone and Android device. I don't need Flash Fallback.
Then what is the best method to make video player only for mobile? Do i have to use any of these http://praegnanz.de/html5video/ or only html 5 video code will do. I don't need custom skin. Main thing is video should be smoothly played on iPad, iphone and Android.
You don't necessarily have to use one of those video libraries; you can use the HTML5 video element which allows you to style the controls via CSS and specify fallbacks (including flash and silverlight).
The main thing to consider will be what video codecs each mobile browser on iphone, ipad and android supports.
In between the tags, you can specify multiple video formats to fallback on.
I tested this on iphone and ipad and it could play the video using the HTML5 video element:
<video width="320" height="240" controls="controls">
<source src="http://blip.tv/file/get/Qtv-CarrieFisherTalksStarWarsOnQ553.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
iOS will support mp4 but i'm not an Android expert so i found this post that details encoding video that will play on Android via the html5 video element: Encoding Video For Android
I'm creating a web page using HTML5 in order to have a mp4 video on it, I already accomplished this but, I trying to add some functionalities like autoplay, autobuffer and loop using this code
<video id="video" width="320" height="240" src="http://.../TCLAST.mp4" controls autobuffer autoplay loop>
But nothing so far, one more thing I want to display this page on the Motorola XOOM. I have used different browsers like dolphin, skyfire, firefox and the default browser.
You can try videojs ( http://videojs.com/ ) and play the video on DOMReady. Using the video JS API. This will also give you the benefit of being iDevice compatable.
The XOOM in its current form is very picky about video. Have you verified that the video you want to play will play in the native player?
For more information, look here:
http://forum.xda-developers.com/showthread.php?t=1026570&highlight=video
http://forum.xda-developers.com/showthread.php?t=1021461&highlight=video
Here the Demo
http://jsfiddle.net/dineshk/fvnr0zex/2/
This Will work when the video tag append using Javascript.
Here the Javascript code
var newHtml = '<video width="100%" height="30%" autoplay controls id="myVideos" src="https://dev.ocutagsnap.com:8080/PearsonVideos/videos/tumb10.mp4" ></video>';
$("#newone").append(newHtml);