I've created a short animation, that I would like to implement into my website.
The animation is only a couple of seconds long and it has no sound.
I would like to implement it, like one would implement a GIF, meaning: I want it to autoplay, run in a constant loop and I don't want there to be any controls.
And so I rendered a GIF and for comparison I also rendered a .mp4-video and the .mp4 is far superior:
mp4: Looks exactly like I want it to look.
GIF: Even after splitting the frame-rate in half, the GIF-file is still about 5x larger then the .mp4 and it looks very noticeably worse.
So, of course, I'm implementing the .mp4 and this is how I did it: <video autoplay muted loop> – This works perfectly fine on desktop, but it does not work perfectly fine on mobile.
On Desktop it basically behaves like a GIF, but on mobile it does not autoplay and when I click on play it opens the video in a sort of "lightbox", or player, where everything else is gone and I just see the video.
I want the video, on mobile, to also autoplay and I don't want the browser to open any sort of player, how can I do this? Or: Is this possible?
I really don't wanna work with a GIF, if possible. The .mp4 is just much better.
If this is not possible with CSS, maybe there is a JS-way?
I've tried it on a mobile device and it auto plays fine for me. Perhaps the playsinline attribute could help you out.
You should use the playsinline attribute for mobile devices if you don't want the video to start in fullscreen while playing.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline
Related
I've run into a strange problem with video playback on mobile - in general, the videos playback fine on phones, but if the same phone has visited the site more than a few times (say 4 or 5), the video will no longer play and instead display a still image. Here is the format of the HTML for the videos:
<video playsinline autoplay muted loop id="waterBackground" src="../assets/water1-forwards_compressed.mp4"></video>
There is one line of JS changing the video playback rate, but that's it:
$("#waterBackground")[0].playbackRate = 0.8;
All of the HTML videos use this exact format, and every phone I have tested this on (except iphone < 5) has no trouble playing the first the first few times. But things stop working after that. When I clear the browser history and close and reopen the app, the video is working again. Any ideas why this might be happening and how I can fix it?
I am embedding a html5 video. It works perfectly fine in chrome and firefox, however in safari, there seems to be this weird delay, where the video just hangs in there, and won't play until 1-2 minutes after. It however plays immediately, if I switch tabs. I am hosting my video on an Amazon S3, I set it to autoplay, muted and loop. I have tried using jquery to force play the video but it doesn't work. I have tried also changing the metadata to video/mp4 on aws control panel, also doesn't work. Also tried doing some window focusing, also doesn't work. Any tips would be appreciated. Here is the site http://xxvii27.github.io/web-oconnect/
Solved, by converting the .mp4 video to web optimized version using handbrake.
I'm having a bit of difficulty understanding why this works in some cases but not in others.
My goal is to display the video, play it for 5 seconds, pause for 5 seconds, then continue playing.
I have put an alert so I can see if the pause function exists, which it does in every case I have tried (alert appears with "function", if it didn't exist it would say "undefined")
HTML
<video id="previewvid" width="320" height="240" autoplay="autoplay" controls="controls" poster="http://anotherwebsite/image">
<source src="http://anotherwebsite/video.mp4" type="video/mp4">
Video unavailable
</video>
JS
$(document).ready(function() {
alert (typeof document.getElementById('previewvid').pause)
document.getElementById('previewvid').play()
window.setTimeout(function(){
document.getElementById('previewvid').pause()
window.setTimeout(function(){
document.getElementById('previewvid').play()
}, 5000)
}, 5000)
})
Experience:
On my desktop machine this works perfectly in Chrome, but on Firefox I get a MIME type error, I am not too fussed by that as this will be used 99.9% on mobile anyway.
On mobile devices, I have an HTC One M7 with all software up to date. The video can be played in both Chrome and the built in browser, but does not autoplay. I have the same result on iPhone 6.
I tried on an old Samsung (not sure what model, but several years old) and found the same problem in Chrome, but on the built in browser the autoplay worked perfectly as required.
I've googled this problem extensively and there doesn't seem to be any obvious reason why the play/pause functions are not reliable.
Is there any other way I can get around this issue? Or any explanation as to why these functions are so unreliable? Or am I doing something completely wrong?
edit: I should add, the "anotherwebsite" is a CDN where I am paying for the availability of the videos, they have confirmed everything at their end is set up correctly
Good day,
I am trying to build a simple music player using the html audio tag and some javascript. When I was coding it worked ok while the files were stored locally with both safari (on an Imac) and Firefox. Then I uploaded it to my web page to test it live and had these issues:
(1) Safari on the Imac takes about a minute to load the file and start playing
(2) Safari on the iphone doesn't autoplay the files although I used the autoplay attribute in the code....see code below)
(3) Firefox just doesn't play it! (although it played just fine when the files were local)
Seems like the files are too large....my questions are: (1) is there a way to make the loading time shorter? and (2) any idea why the autoplay doesn't work on the iPhone Safari and how to get around it?
Here is the code I used for the songs:
<audio autoplay="autoplay" controls="controls">
<source src="../audio/3.ogv" />
<source src="../audio/3.mp3" />
Your browser does not support the audio element.
</audio>
thanks for your help
diego
I believe you cannot autoplay on the iPhone. I think this is a restriction imposed in order to prevent excess accidental data usage. There were some workarounds to create a fake click, but they seem to have been patched.
Firefox doesn't support MP3 via HTML5. ogv files are Ogg Video, not Audio (ogg), which could be why it's not playing in the audio tag.
As for loading time, the best way would be to compress the file as much as possible. This would reduce the download time.
Just a heads up ... since HTML 5 isn't XML based syntactically, you don't assign attributes like that.
use <audio autoplay controls> as the opening tag.
i have a problem, i have a player in my website and the music i want to play is just a link of music, and i want to play it in my own player. i need some idea about this...
thanks you!..
My favorite HTML5 solution for audio right now is this project: http://kolber.github.com/audiojs/
It "fixes" the users browser so the HTML5 <audio /> tag works no matter which browser they are using (IE, FF, Safari, etc). Then with just a sprinkling of JS you can just add something like this to your page:
<audio src="/mp3/juicy.mp3" preload="auto" />
Check out the project page, the setup shouldn't take more than 5-10 minutes.
Apparently there is also a videojs library to run HTML5 video. Its slightly more complicated but if you combine the two, it should give you all the power you need.
http://videojs.com/#getting-started