I have created a mp4 video and called it in the below html5 video tag as follows
<video width="100%" autoplay="" loop="">
<source src="http://beta.jointviews.com/testbytes/wp-content/themes/zerif-lite/videos/testbytes.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
the video works fine in mozilla and chrome but not in safari and mobile devices specially on androids and ipod,ipads{i could check only in these)
i have read in the link that safari supports mp4 but it is not
here is the fiddle
http://jsfiddle.net/Lqaro0vr/
Related
Trying to get this code to have functioning controls in Safari and Firefox. The controls show up just not responsive. Code works fine in Chrome.
<span class="device image fit"><section id="video">
<video src="images/Compassionate%20Release%20Healthcare%20Network.mp4" width="100%" controls="true">
</video>
</span>
Thanks,
The code is missing a close tag for the section tag. This may throw off the parser in some browsers.
Simply add one or remove the existing opening tag:
<span class="device image fit">
<section id="video">
<video src="..." width="100%" controls="true">
</video>
</section> <!-- add this -->
</span>
The problem is you are trying to use .mp4 format only, which is not supported in all browser.
You need to provide a different movie format and create some fallbacks for mobile devices or other browsers.
Try writing your <video> element like this:
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mov" type="video/mov">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video
</video>
This will be supported by most desktop and mobile browsers.
.mov - supported by Safari, iOS Safari.
.mp4 - supported by Chrome,
Android Chrome and Android Browser, IE.
.webm - supported by Firefox, Chrome and IE.
For further reading, check out this article.
I have a website that uses the HTML5 video tag;
<video id='video' autoplay muted loop controls>
<source src="video/homevideo.mp4" />
</video>
The video is playing on Firefox and Chrome but not at all in Safari (desktop, iPhone etc). MP4 should be supported and work on Safari.
The same problem has already been discussed here: HTML5 Video tag not working in Safari , iPhone and iPad
Either it has to do with a MimeType issue or the web server does not support HTTP byte-range requests.
In the below code the video is working on ie, chrome and mozilla
But the video is not supporting on mobile
What is the solution friends help me:
<video width="400" height="360" autoplay loop>
<source src="http://www.example.co.in/videos/trytek.mp4" type="video/mp4">
<source src="http://www.example.co.in/videos/trytek.ogg" type="video/ogg">
</video>
Which mobile OS (and version), and which mobile browser (and version) are you using?
1) Not all video types are supported by all mobile browsers:
HTML5 Video Element Browser Support
2) You may require special handling to run the video:
Android < 2.3 HTML5 Video handling
Let me know how it goes.
I am using jquery mobile and video tag to display videos.
My video plays fine on all 'desktop' browsers, but when play when I use the following code in mobile safari (iPhone) it shows only black rectangle without any controls.
I used video used commonly in html5 examples. (from http://www.bigbuckbunny.org) so it shouldn't be encoding issue.
When I access video directly by typing its url http://myurlofvideo.mp4 it plays correctly in mobile Safari.
What's causing the problem?
Thank you in advance!
<video width="75%" id="video1" controls="true" autoplay="true">
<source src="videos/mov_bbb.mp4" type="video/mp4">
<source src="videos/mov_bbb.webm" type="video/webm">
Your browser does not support the video tag.
</video>
I tried the sample below in iphone simulator and it is working ,check it out .
<video width="320" height="240" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
it shows preview image of the video,when you click on it plays in fullscreen.
i have a video file (avi with avc+mp3). Is it possible to play this via the HTML5 video-tag?
i have tested it in Internet Explorer 9 but it will not work! Is it because the audio codec mp3 is not supported or is it the "video Codec-Profile "HighL3.0"?
Edited to fix misunderstanding
I suggest you do some reading about the ongoing codec wars, or look at this table. Basically, some browsers accept only videos with a MP4 container, H.264-encoded video, and AAC-encoded audio (low-complexity profile); some browsers accept only videos with a WebM container, VP8-encoded video, and ogg-vorbis-encoded audio.
MP4/H.264 seems to be winning the war, but at the moment you'll need both for complete browser support.
Modern browsers which support <video> use WebM, MP4/H.264 and OGG video format. So you can't use AVI for HTML5 video. There is no unique format which is supported by all browsers. The only solution is to convert file to supported formats and use <video> like this:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4"> <!-- IE, Chrome, Safari, Android -->
<source src="movie.ogg" type="video/ogg"> <!-- Firefox, Chrome, Opera -->
<source src="movie.webm" type="video/webm"> <!-- Firefox, Chrome, Opera, Android -->
Your browser does not support the video tag.
</video>