The website has a simple HTML video as seen below:
<video id="myVideo" controls preload="metadata" playsinline webkit-playsinline="true" poster="vid/vid_pic.jpg" width="640" height="360" style="background-color: black;" >
<source src="vid/vid.mp4" type="video/mp4" />
</video>
All browsers and devices play the video fine when you click the play button. However iOS phones refuse to start the video, the users just keep tapping the play button but nothing happens.. They must refresh the page and then it works as intended.
I used to have a video wrapper but stripped it out because I thought it might have been the culprit.
The video is 720x1080, 2 minutes long, and optimized to be 36 MB.
Obviously this is not the ideal use case.. Any way to make a video start without a hitch on apple devices/safari?
Related
I put a video as a header in my website. It looks quite OK on Chrome/Firefox desktop and Chrome mobile but... does not seem to work on firefox mobile.
I only see a fixed image on my video but the video does not play.
Is there something I can do ?
<video id="my_video" loop muted autoplay>
<source type="video/mp4" src="my_video.mp4"/>
</video>
Generally the autoplay tag is not supported on mobile. That's to avoid users incurring data transfer costs because video files are large and can use up a lot of data.
you can use the 'poster' tag so when the video doesn't play you have an image.
I have a short video that should autoplay in Chrome. I've read plenty about this problem and tried a lot of solutions. Presently my code to play the video is
<video autoplay="true" playsinline muted >
<source src="assets/video/somevideo.webm" type="video/webm" />
</video>
This plays the video, but in an apparently random way. Sometimes the video starts, sometimes not, showing a white screen instead.
The video format is compatible with Chrome ('sometimes' it starts correctly!). The html attributes should be correct, taking into account the limitation of chrome in playing not muted videos.
What could be the problem and how can I play the video, being sure it will always be played?
I have a full width background video with autoplay and loop propreties and works really good on desktop but in mobile video dont show and dont start... just show a black screen
I need to fix this for mobile, if that's not possible to put video working on mobile I can put a background image on mobile
<video autoplay loop muted autobuffer preload="auto" poster="poster.png" class="background-video">
<source src="video.webm" type='video/webm; codecs="vp8.0, vorbis"'>
<source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
</video>
adding playsinline attribute to the video tag fixed the issue for me.
according to a good google search, on mobile the Video element falls back to a poster...
be mind full of video size so they user will not encore massive data usage charges and to maintain a responsive site.
<video playsinline autoplay loop muted id="myVideo"></video>
The Autoplay tag on mobile is generally not supported - this is to avoid users incurring data transfer costs as video files are large and can eat into data limits.
The poster tag should work fine, however, as I think you noted in your last comment.
Turns out the video actually plays - but it's weird how that happens!
First of all, I'm testing on Android 5.1.1.
Alright, here's the situation:
On load, the video doesn't play but instead displays the fallback poster image.
I had given up on the video thing, but when I was navigating the site and at some point decided I wanted to go back Home, I navigated to the Homepage and the video was playing! I tried refreshing the page, and the video didn't play on load but instead got the poster image!
What could be happening?
I figured just clicking the phone's back button to navigate to the homepage still didn't play the video, but explicitly clicking the home link did!
So I gave it another shot - refreshed the page, video didn't play, clicked the home link and the video started playing on load!
This is the structure of my home link: <img src="path-to-logo" />
Can somebody explain what could be happening?
Context:
Making an advanced video-player using web components technology (polymer-project.org) I have found some problems when I tried to include 2 instances of the video-player playing the same video resource. Analyzing the problem I have realized that it has nothing to do with polymer but with the HTML5 video tag only on Chrome browser.
Problem:
The source of my test html page contains essentially the following code:
<video id="video1" width="100%" controls>
<source src="/test/resources/video1.mp4" type="video/mp4" >
</video>
...
<video id="video2" width="100%" controls>
<source src="/test/resources/video1.mp4" type="video/mp4" >
</video>
The effects of the anomalous behavior can be outlined as:
The second video does not show the first frame (a black player is shown instead)
Trying to play the second video player it does not work
The first video player works as expected
After pausing the first video, the second one appears on the player
Now the playing command on step 2 seems to respond and start suddenly the second player
Summing up, it is impossible to play both videos simultaneously. This only happens on chrome (neither on Safari nor Firefox) and when the video resource is the same one.
Question:
Does anybody have a suggestion about how can I proceed in order to fix the problem with chrome?
i have a html5 video embedded in a web page, that appears with a fade when an user clicks on a link.
If i click on play, the timeline cursor jumps to the end, not playing anything.
If i click on the timeline (so seeking) the video starts from the point where i click and plays normally.
I already added the video formats in the .htaccess.
How can i fix this?
On chrome it works as intended.
<video width="660" height="275" controls="controls">
<source type="video/webm" src="video/nev.webm"/>
<source type="video/mp4" src="video/nev.mp4"/>
<source type="video/ogv" src="video/nev.ogv"/>
<source type="video/flash" src="video/nev.flv"/>
</video>
Roby
I fixed changing video converter, i used "Miro Converter" and it was creating this problem, "Any Video Converter" converted the video making it work in firefox.
I think that the problem is the dimension of movies, specially the format. While I was using 600 x 480 px everything play perfect, but beyond of this relation the timeline cursor doesn't works in autoplay unless I " push " the cursor 5 sec. forward .... I also use Miro video converter.