I have a HTML5 page using <video> tag and running .webm files. It all works quite smoothly.
However, I would like to not run the video on mobile devices and instead replace it with the .jpeg poster.
This is the setup now:
<video id="video" preload="auto" poster="video1.jpg" autoplay muted loop>
<source src="video1.webm" type="video/webm" />
<source src="video1.ogv" type="video/ogv" />
<source src="video1.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
Any ideas? Thanks!
You could hide the video-tags via media-queries and "display:none;" and then replace it with a for desktop hidden img-tag.
Sorry for the short answer... Written with my mobile ;) I'll update the answer as soon as I get home.
Most phones and tablets by default do not play video automatically, you will need to add a static background as a fallback for mobile devices.
https://www.aerserv.com/why-does-video-autoplay-on-mobile-devices-not-work/
Related
I am trying to make the video in my website full screen but viewing it on iphone it redirect me to the video, is there a way play the video on same page?
<video poster="poster.jpg" preload autoplay loop>
<source src="vimeo.mp4" type="video/mp4">
To get the best experience of this website please consider updating your web browser
</video>
~
<video <video poster="poster.jpg" preload autoplay loop playsinline>
<source src="vimeo.mp4" type="video/mp4">
To get the best experience of this website please consider updating your web browser
</video>
you can simply add the "playsinline" attribute in the video tag, you may also include "webkit-playsinline"
I'm having trouble with a video I'm using as a background -- it works correctly on firefox & chrome, however on Safari on load and when it loops, it flashes black for a moment.
Because it's looping the trick of having it fade in after won't work. I'm not really sure what's causing the issue. It's using a poster which loads correctly. the file is about 1.1mb.
Any ideas or solutions?
<video id="HeroVideo2" class="width100" loop="true" autoplay="true" preload="none" poster="/assets/videoposter.jpg">
<source src="/assets/hero.mp4" type="video/mp4">
<source src="/assets/hero.webm" type="video/webm">
<source src="/assets/her.ogv" type="video/ogg">
</video>
I have found that the issue was related to encoding in Handbrake.
I reencoded the video and made sure to check the "Web optimised" option and the new video no longer has the one or two back frames when viewed in Safari.
I have a website I was working on for a uni project, and I embedded a video using the HTML5 video tag. The code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
And it was working fine at uni, but when I went home it no longer worked. I did a bit of research, and Chrome doesn't support mp4. Ok fine, so I found a site that allowed me to convert to the other supported types so now my code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
Something broke :/
</video>
And both the ogg and webm were working (I tested each one individually using comments). But at home it still didn't work. It comes up with the video widget thing and displays the correct length of video but the play button is disabled and there is no still image. But it still worked at uni. Until today. Now I have the same problem. Have Chrome stopped supporting the HTML5 video tag?
NOTE the ogg and webm still work on firefox, but not mp4
try to rearrange it so that
<video width="400" controls>
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
and remove the empty value for attribute controls
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 web site and I want to link a button to a video. So whenever someone clicks the "video" buttons let's say, I want to open the video.mp4 in a new browser. What I do is:
<div>...</div>
The video is quite big (190MB) so the code above is not working. I start listening to the sound but cannot see the image.
Does anyone know how to do it? Or any simple way to just open this video as a link?
You could use HTML5 tag don't forget that MP4 is only supported by IE 9+, Chrome 5+ and Safari 3+. You should at least convert your file to WebM or Ogg to make it compatible with all recent browsers.
To do so you would need a new page (where the link goes) and in this page have this code:
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
/* instead of the last line you could also add the flash player*/
</video>
The browser will automatically select the first known format and play it. (source: w3Schools.com)
Hope this helps!