I am trying to make a video my background, which will loop. It works perfectly on PC, but once I test it on mobile (IOS) it doesn't appear.
I've tried putting playsinline and making the the video path absolute, but it it still doesn't work on mobile.
HTML
<video autoplay muted loop playsinline id="myVideo">
<source src="vhs.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Note: What could be an alternative to having a video be the background?
I initially wanted the same video, but in .gif format. However, it was not nice.
Related
I'm using the Instagram API to pull posts to a website. If it's a video post I'm using (simplified)
<video id="id123" poster="img.jpg" controls>
<source id="id123" src="instagramURL.mp4" type="video/mp4">
</video>
The controls show in Safari but NOT in Chrome. So the poster image shows but there's no way to play the video unless I put in autoplay muted which mutes the video and, without controls, there's no way to turn on the audio.
How do I get the controls to show?
I'm trying to add video to a portfolio site I'm working on, but it has this choppy quality to it, like it's lacking anti-aliasing.
Or it could be something else.. Does anybody have any clues?
It looks fine when I play it in a video player.
(Open the image in full view to see artifacts better)
Here's the code for the video tag:
<video width="100%" class="videoStyle" autoplay muted loop>
<source src="video/01-02.mov" type="video/mp4">
Your browser does not support the video tag.
</video>
<video autoplay muted loop id="videobg">
<source src="bgvideo/bgvideo.mp4" type="video/mp4">
</video>
Hey guys i am using a background video for a website it perfectly works on pc but on iphone it's not working
Link to website: https://fierce-atoll-94899.herokuapp.com/
You most likely need to add the playsinline attribute as well, otherwise e.g. on iPhone the Video would only be played in full screen.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
this screenshot on mobile, the video doesn't autoplay even when i click on the play arrow button(which shouldn't even be there) still doesn't play at all, its like a picture but on desktop it's perfectly fine.
I tried this code
<video preload autoplay loop muted defaultMuted playsinline>
<source src="video2.mp4" type="video/mp4">
</video>
but still no
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.